How to make text change color after click in Vue

Below I will share with you a Vue method to implement text color change after clicking. It has a good reference value and I hope it will be helpful to everyone.

Use text as an example here, the principle of image switching is the same.

The general idea is: Use two spans with the same class to switch respectively. The text before and after has the same class, mainly to change the position of the text before and after to be the same. Then use the click event to control their visibility.

The code is as follows:

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;
 }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solving the problem of hot deployment not detecting file changes in Webpack

In webpack-dev-server Achieve automatic page update

Achieve magnifying glass through jquery technology

The above is the detailed content of How to make text change color after click in Vue. For more information, please follow other related articles on the PHP Chinese website!