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