Vue實現點擊後文字變色切換方法，vue變色

Vue實現點擊後文字變色切換方法，vue變色

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

大概思路是：用兩個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實現點擊後文字變色切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。