Comment utiliser les classes dans vue

La propriété Class dans Vue.js permet d'ajouter ou de supprimer dynamiquement des classes CSS. Sa valeur est un objet, la clé est le nom de la classe CSS et la valeur est une valeur booléenne. Lorsque la valeur correspondant à la clé est vraie, la classe CSS correspondante est appliquée à l'élément ; lorsque la valeur correspondant à la clé est fausse, la classe CSS correspondante est supprimée de l'élément. Plusieurs classes CSS peuvent être spécifiées avec des espaces.

Attribut Class dans Vue.js

Qu'est-ce que l'attribut Class ?

L'attribut class dans Vue.js permet d'ajouter ou de supprimer dynamiquement des classes CSS sur les éléments HTML. class 属性允许动态地添加或删除 HTML 元素上的 CSS 类。

用法：

<code><div :class="{ active: isActive, disabled: isDisabled }"></div></code>

结构：

class 属性的值是一个对象，其中：

• 键是 CSS 类名
• 值是布尔值，表示类是否应用

动态应用 CSS 类：

如果对象的键对应的值（isActive 和 isDisabled）为 true，则相应的 CSS 类（active 和 disabled）将被应用到元素上。

移除 CSS 类：

当对象的键对应的值为 false 时，相应的 CSS 类将从元素中移除。

多个 CSS 类：

可以通过使用空格将多个 CSS 类指定为对象键：

<code><div :class="{ 'class-1': condition1, 'class-2': condition2 }"></div></code>

注意：

• class 属性中的值必须是一个对象。
• CSS 类名必须用字符串表示，用单引号或双引号引起来。
• 布尔值必须是 true 或 false

• La clé est le nom de la classe CSS 🎜La valeur est une valeur booléenne, indiquant si la classe s'applique 🎜🎜🎜🎜Classe CSS d'application dynamique : 🎜🎜🎜Si la valeur correspondant à la clé de l'objet (isActive et isDisabled) est true , les classes CSS correspondantes (active et disabled) seront appliquées à l'élément. 🎜🎜🎜Supprimer les classes CSS : 🎜🎜🎜Lorsque la valeur correspondant à la clé de l'objet est false, la classe CSS correspondante sera supprimée de l'élément. 🎜🎜🎜Classes CSS multiples : 🎜🎜🎜Plusieurs classes CSS peuvent être spécifiées comme clés d'objet en utilisant des espaces : 🎜rrreee🎜🎜Remarque : 🎜🎜
  • class dans l'attribut Value must être un objet. 🎜
  • Les noms de classes CSS doivent être représentés sous forme de chaînes, entre guillemets simples ou doubles. 🎜
  • La valeur booléenne doit être true ou false. 🎜🎜

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!