vue change le style CSS

Vue est un framework JavaScript populaire qui aide les développeurs à créer des applications Web complexes. Vue fournit un ensemble utile de fonctionnalités et d'outils qui facilitent la création d'interfaces utilisateur dynamiques. L'une des fonctionnalités est la possibilité de modifier facilement les styles CSS.

Dans Vue, vous pouvez utiliser la directive v-bind pour lier dynamiquement les styles CSS. La directive v-bind peut lier les attributs de données d'une instance Vue aux attributs d'un élément DOM. Par exemple, vous pouvez utiliser la directive v-bind:class pour lier dynamiquement un nom de classe CSS. L'utilisation spécifique est la suivante :

<div v-bind:class="{ active: isActive }"></div>

Dans l'exemple ci-dessus, isActive est une propriété d'une instance Vue. Si isActive est vrai, l'attribut class de l'élément div contiendra le nom de la classe « active », sinon il ne contiendra pas le nom de la classe.

En plus d'utiliser des littéraux d'objet pour définir le nom de la classe, vous pouvez également utiliser des propriétés calculées pour renvoyer une chaîne de nom de classe, par exemple :

<div v-bind:class="classObject"></div>

data: {
  isActive: true
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      'text-danger': !this.isActive
    }
  }
}

Dans l'exemple ci-dessus, classObject est une propriété calculée qui renvoie un littéral d'objet basé sur la valeur de la propriété isActive. L'objet contient deux propriétés : active et text-danger. Si isActive est vrai, classObject renvoie { active: true, 'text-danger': false } et l'attribut de classe de l'élément div contiendra le nom de la classe "active", sinon il renvoie { active: false, 'text-. danger' : true }, l'attribut de classe de l'élément div contiendra le nom de la classe "text-danger".

En plus de lier dynamiquement les noms de classe, vous pouvez également utiliser la directive v-bind:style pour lier dynamiquement les styles en ligne. v-bind:style peut lier l'attribut data d'une instance Vue à l'attribut style d'un élément DOM. Par exemple, vous pouvez utiliser la directive v-bind:style pour lier dynamiquement une couleur d'arrière-plan. L'utilisation spécifique est la suivante :

<div v-bind:style="{ backgroundColor: color }"></div>

Dans l'exemple ci-dessus, la couleur est une propriété d'une instance de Vue. Si vous définissez la couleur sur "rouge", la couleur d'arrière-plan de l'élément div sera rouge.

En plus d'utiliser des littéraux d'objet pour définir des styles en ligne, vous pouvez également utiliser des propriétés calculées pour renvoyer un littéral d'objet contenant plusieurs propriétés de style, par exemple :

<div v-bind:style="styleObject"></div>

data: {
  textColor: 'red',
  fontSize: 16
},
computed: {
  styleObject: function () {
    return {
      color: this.textColor,
      fontSize: this.fontSize + 'px'
    }
  }
}

Dans ce qui précède Dans l'exemple, styleObject est une propriété calculée qui renvoie un littéral d'objet basé sur les valeurs des propriétés textColor et fontSize. L'objet contient deux propriétés de style : color et fontSize. Si textColor est "red" et fontSize est 16, alors styleObject renvoie { color: 'red', fontSize: '16px' }, et l'attribut style de l'élément div contiendra ces deux attributs de style.

Pour résumer, Vue fournit deux instructions : v-bind:class et v-bind:style, qui peuvent modifier dynamiquement les styles CSS de manière très pratique. Ces directives peuvent définir dynamiquement les noms de classe et les styles en ligne en fonction des propriétés et des propriétés calculées de l'instance Vue, permettant aux applications Web d'avoir une meilleure interaction et une meilleure expérience utilisateur.

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!