如何實現點贊按鈕圖片切換

在vue裏邊想要實現點贊功能，也就是點一下圖片換成另一張，再點一下切換回來，如此循環。

來回切換的功能最簡單的辦法就是用v-if v-else指令了。

具體操做：先寫兩個img標籤，同時綁定點擊事件：@cilck="xxx()",

第一個img標籤：寫上v-if="i%2!==0"，也就是說當i爲奇數時，顯示該圖片，src屬性把灰色的圖片地址寫上；

第二個img標籤：寫上v-else,也就是說當i爲偶數時，顯示該圖片，src屬性把紅色的圖片地址寫上。

而後再data函數裏邊定義變量i默認值爲1.

最後再methods裏邊寫事件函數：

xxx(){

 this.i++;

}

 

 

下面是代碼：

 

 

================================================================================

還有另一種辦法就是用原生DOM來寫

代碼圖：

效果圖：