Comment ajouter du style après un clic sur vue

Dans Vue.js, nous pouvons contrôler le style des éléments en liant les attributs de classe et modifier le statut des éléments via des événements de clic, obtenant ainsi l'effet d'ajouter des styles après avoir cliqué. Cet article expliquera comment utiliser Vue.js pour réaliser cette fonction.

1. Tout d'abord, définissez une variable dans l'instance Vue pour contrôler le style de l'élément.

data () {
  return {
    isActive: false
  }
}

2. Liez l'attribut class à l'élément.

<div :class="{active: isActive}" @click="isActive = !isActive">Click me</div>

3. Expliquez la signification du code ci-dessus. Nous utilisons la directive :class dans la balise div pour lier un objet. Le nom d'attribut de l'objet est le nom de la classe de style et la valeur de l'attribut est un type booléen, qui est utilisé pour contrôler si le style est efficace ou non. Lorsque isActive est vrai, l'attribut actif dans l'objet prend effet, ajoutant ainsi un style actif à la balise div. Lorsque isActive est faux, ce style ne prend pas effet. Dans le même temps, nous utilisons la directive @click pour surveiller l'événement click de la balise div et inverser la valeur de isActive pour obtenir l'effet d'ajouter des styles après avoir cliqué.

4. Utilisez la feuille de style CSS pour définir le style actif.

.active {
  background-color: red;
}

5. Ajoutez des effets d'animation de style (facultatif).

.active {
  background-color: red;
  animation: active 0.5s;
}

@keyframes active {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Ajoutez une animation nommée active à la feuille de style pour obtenir l'effet de transition dégradé du style. Lorsque le style actif sur la balise div prend effet, l'effet d'animation sera également déclenché, rendant l'interface plus vivante et intéressante.

Résumé :

Grâce à la directive :class et à la directive @click de Vue.js, nous pouvons facilement obtenir l'effet d'ajouter des styles après avoir cliqué. Dans le même temps, nous pouvons également utiliser des effets d'animation dans les feuilles de style CSS pour ajouter des effets dynamiques de base à la page, la rendant plus vivante et intéressante.

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!