Vue實(shí)現(xiàn)active點(diǎn)擊切換方法
更新時(shí)間：2018年03月16日 09:15:46 作者：小破孩呦
下面小編就為大家分享一篇Vue實(shí)現(xiàn)active點(diǎn)擊切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
循環(huán)的情況：
1、點(diǎn)擊時(shí)傳入index索引（獲取當(dāng)前點(diǎn)擊的是哪個(gè)）
@click="active(index)"
2、將索引值傳入class（索引等于幾就第幾個(gè)添加active類）
:class="{active:index==ins}"
3、在data里邊添加ins：0（表示默認(rèn)第一個(gè)添加active類）
data{ ins：0 }
4、最后在methods里邊添加方法
ctive (num) {
this.ins=num
}
非循環(huán)的情況：
1、在標(biāo)簽內(nèi)寫入點(diǎn)擊事件和添加的class樣式
注釋： :class="{active:shows==1}"就是說(shuō)當(dāng)shows==1時(shí)添加class=active，否則不添加。
2、在methods里邊定義方法
效果如下：
到此就完成了點(diǎn)擊切換效果。
附加：
使用三木運(yùn)算符實(shí)現(xiàn)篩選箭頭切換
以上這篇Vue實(shí)現(xiàn)active點(diǎn)擊切換方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue.js實(shí)現(xiàn)圖片切換功能
- Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法
- vue2.0中click點(diǎn)擊當(dāng)前l(fā)i實(shí)現(xiàn)動(dòng)態(tài)切換class
- Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
- Vue2.0點(diǎn)擊切換類名改變樣式的方法
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
- Vue點(diǎn)擊切換顏色的方法
- vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁(yè)面的切換
- vue卡片式點(diǎn)擊切換圖片組件使用詳解
- Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換
相關(guān)文章
vue打包后出現(xiàn)空白頁(yè)的原因及解決方式詳解
在項(xiàng)目中很多時(shí)候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來(lái)的html直接打開(kāi)是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁(yè)的原因及解決方式的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了深入淺出vue圖片路徑的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue 修改網(wǎng)站圖標(biāo)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
class 與 style 綁定就是專門用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
vue3+vite2實(shí)現(xiàn)動(dòng)態(tài)綁定圖片的優(yōu)雅解決方案
這篇文章主要為大家詳細(xì)介紹了vue3+vite2實(shí)現(xiàn)動(dòng)態(tài)綁定圖片的優(yōu)雅解決方案,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
數(shù)據(jù)緩存可以提高應(yīng)用程序的性能,減少網(wǎng)絡(luò)請(qǐng)求,提高用戶體驗(yàn),在本文中,我們介紹了Vue中如何進(jìn)行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue項(xiàng)目中使用ts（typescript）入門教程
最近項(xiàng)目需要將原vue項(xiàng)目結(jié)合ts的使用進(jìn)行改造，本文從安裝到vue組件編寫進(jìn)行了說(shuō)明，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue項(xiàng)目中Eslint校驗(yàn)代碼報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue項(xiàng)目中Eslint校驗(yàn)代碼報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。2017-12-12
Vue結(jié)合openlayers按照經(jīng)緯度坐標(biāo)實(shí)現(xiàn)錨地標(biāo)記及繪制多邊形區(qū)域
OpenLayers是一個(gè)用于開(kāi)發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個(gè)開(kāi)源的項(xiàng)目，其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶端提供強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制2022-09-09