Vue implements text color switching after clicking, vue color changing
Here, we use text examples to illustrate how image switching works.
The general idea is:The same span of two classes is the text before and after the switch. The same class is mainly used to change the text positions before and after the change. Then, the click event is used to control their explicit hiding.
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 ;}
After the above Vue is clicked, the text color switching method is all the content shared by the editor. I hope to give you a reference and support for the help house.