Vue實現(xiàn)active點擊切換方法
更新時間：2018年03月16日 09:15:46 作者：小破孩呦
下面小編就為大家分享一篇Vue實現(xiàn)active點擊切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
循環(huán)的情況：
1、點擊時傳入index索引（獲取當前點擊的是哪個）
@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}"就是說當shows==1時添加class=active，否則不添加。
2、在methods里邊定義方法
效果如下：
到此就完成了點擊切換效果。
附加：
使用三木運算符實現(xiàn)篩選箭頭切換
以上這篇Vue實現(xiàn)active點擊切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中element-plus?icon圖標的正確使用姿勢
element-plus官方提示,Icon圖標正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標的正確使用姿勢,需要的朋友可以參考下2022-03-03
Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue 是一個 漸進式的javascript框架，腳手架是一個通用概念，幫助搭建項目的工具，本文以vue2為例結(jié)合實例代碼給大家詳細講解，感興趣的朋友跟隨小編一起看看吧2022-12-12
Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細步驟(超詳細)
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
Vue源碼解析之數(shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之數(shù)據(jù)響應(yīng)系統(tǒng)的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)詳解
本篇文章給大家分享了一個用vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)的代碼過程，有興趣的朋友跟著參考學習下。2018-05-05
這篇文章主要為大家詳細介紹了vue時間線組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue項目打包發(fā)布后接口報405錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07