Maison > Article > interface Web > Comment faire changer la couleur du texte après un clic dans Vue
Maintenant, je vais partager avec vous une méthode Vue pour implémenter le changement de couleur du texte après avoir cliqué. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.
Ici, nous utilisons le texte comme exemple. Le principe du changement d'image est le même
L'idée générale est : Utilisez deux travées avec. la même classe pour changer respectivement. Le texte avant et après a la même classe, principalement pour changer la position du texte avant et après pour qu'il soit le même. Utilisez ensuite l’événement click pour contrôler leur visibilité.
Le code est le suivant :
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; }
Ce qui précède est ce que j'ai compilé pour tout le monde. J’espère qu’à l’avenir, cela sera utile à tout le monde.
Articles connexes :
Dans webpack-dev-server Atteindre automatiquement mise à jour de la page
Obtenez une loupe grâce à la technologie jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!