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