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 :

Résoudre le problème du déploiement à chaud ne détectant pas les modifications de fichiers dans Webpack

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!