Vue實現active點擊切換

 

Vue實現active點擊切換

循環的狀況：

一、點擊時傳入index索引（獲取當前點擊的是哪一個）

@click=「active(index)」

二、將索引值傳入class（索引等於幾就第幾個添加active類）

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

三、在data裏邊添加ins：0（表示默認第一個添加active類）

data{ ins：0 }

四、最後在methods裏邊添加方法

active(num) {
                this.ins=num

}

非循環的狀況：

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

註釋： :class="{active:shows1}"就是說當shows1時添加class=active，不然不添加。

二、在methods裏邊定義方法

 

效果以下：

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

附加：

使用三木運算符實現篩選箭頭切換
三木運算符執行方法：若是show==1爲真，則顯示icon_up.png,不然顯示icon_down.png