這里用文字舉例，圖片切換的原理也是一樣的

大概思路是：用兩個class相同的span分別是切換前后的文字，class相同主要是為了變換前后的文字位置相同。然后用click事件控制它們的顯隱。

代碼如下：

HTML：

<span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回復</span><span class="response" v-show="showCommentInput" @click="showCommentInput = !showCommentInput">回復</span>

JS：

data(){ return {  showCommentInput = false, }}

CSS：

.response { font-size:14px; color: #3e3e3e; &:hover{ font-weight: bold; } &+.response { font-weight: bold; }

以上這篇Vue實現點擊后文字變色切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。