En vue : utilisation de la classe

L'attribut :class dans Vue est utilisé pour définir dynamiquement la classe CSS d'un élément. Il peut ajouter ou supprimer des classes, des tableaux de classes liées ou des objets en fonction de conditions. Il accepte un objet, un tableau ou une chaîne contenant un nom de classe CSS comme valeur, ne peut être appliqué qu'aux éléments dotés d'un attribut de classe et n'écrase pas les classes existantes.

Utilisation de :class dans Vue

:class attribut

:class est une propriété dans Vue qui permet de définir dynamiquement la classe CSS d'un élément. Il accepte un objet, un tableau ou une chaîne contenant un nom de classe CSS comme valeur.

Syntaxe

<code>:class="['class1', 'class2', { 'class3': true }]"</code>

Objectif

 : L'attribut class est principalement utilisé pour ajouter ou supprimer dynamiquement des classes CSS en fonction des données. Il peut implémenter les fonctions suivantes :

• Ajouter ou supprimer des classes en fonction de conditions : :class="{ 'active': isVisible }":class="{ 'active': isVisible }"
• 根据数据值添加类：:class="['class-' + propValue]"
• 绑定类数组：:class="classArray"
• 绑定类对象：:class="{ 'class1': true, 'class2': false }"

示例

<code class="html"><div :class="{ 'active': isVisible, 'error': hasError }"></div></code>

上面的示例将根据 isVisible 和 hasError 的值动态地添加或移除 active 和 error 类。

<code class="html"><div :class="classArray"></div></code>

上面的示例将绑定一个类数组，该数组包含要添加到元素的类名称。

注意事项

• :class 属性只能应用于带有 class
Ajouter des classes en fonction des valeurs de données :  : class= "['class-' + propValue]"
• Tableau de classes de liaison : :class="classArray"
• Objet de classe de liaison : :class="{ ' class1' : true, 'class2' : false }"

🎜🎜🎜Exemple🎜🎜rrreee🎜L'exemple ci-dessus sera dynamique en fonction des valeurs de isVisible et hasError Ajoutez ou supprimez les classes active et error indépendamment. 🎜rrreee🎜L'exemple ci-dessus liera un tableau de classes contenant les noms de classe à ajouter à l'élément. 🎜🎜🎜Notes🎜🎜🎜🎜 : L'attribut class ne peut être appliqué qu'aux éléments avec l'attribut class. L'attribut 🎜🎜:class ne remplace pas la classe existante d'un élément, mais l'ajoute à la classe existante. 🎜🎜Si la valeur est booléenne, la valeur correspondante sera définie dans l'objet de classe avec le nom de la classe comme clé. 🎜🎜

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!