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樣式
注釋: :class="{active:shows1}"就是說當shows1時添加class=active,否則不添加。
2、在methods里邊定義方法
效果如下:
到此就完成了點擊切換效果。
附加:
使用三木運算符實現篩選箭頭切換
三木運算符執行方法:如果show==1為真,則顯示icon_up.png,否則顯示icon_down.png