Vue實現active點擊切換


 

Vue實現active點擊切換

循環的情況:

1、點擊時傳入index索引(獲取當前點擊的是哪個)

@click=“active(index)”

2、將索引值傳入class(索引等於幾就第幾個添加active類)

:class="{active:index==ins}"

3、在data里邊添加ins:0(表示默認第一個添加active類)

data{ ins:0 }

4、最后在methods里邊添加方法

active(num) {
                this.ins=num

}

非循環的情況:

1、在標簽內寫入點擊事件和添加的class樣式

image.png
注釋: :class="{active:shows1}"就是說當shows1時添加class=active,否則不添加。

2、在methods里邊定義方法

 

效果如下:

image.png
image.png
image.png

到此就完成了點擊切換效果。

附加:

使用三木運算符實現篩選箭頭切換
image.png
三木運算符執行方法:如果show==1為真,則顯示icon_up.png,否則顯示icon_down.png


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM