Vue realizes the method of changing the color after clicking text

Here, the principle of picture switching is the same

The general idea is:Using two spans with the same classes is to switch the text before and after. The same class is mainly to change the text before and after. Then use the click event to control their appearance and implicitness.

The code is as follows:

HTML：

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

JS：

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

CSS：

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

The above article Vue's color change switching method after clicking is all the content I share with you. I hope you can give you a reference and I hope you support me more.