Explication détaillée de la classe de liaison dynamique Vue.js

Le cœur de Vue.js est un système de liaison de données réactif qui nous permet de « lier » le DOM aux données sous-jacentes en utilisant une syntaxe spéciale dans les modèles HTML ordinaires. Le DOM lié sera maintenu synchronisé avec les données, et chaque fois que les données changent, la vue DOM correspondante sera mise à jour. Sur la base de cette fonctionnalité, lier dynamiquement des classes via vue.js devient très simple.

1. Liaison de données

Les instructions vue sont marquées avec v- Prefix. Instructions de liaison de données v-bind: nom d'attribut, abrégé en: nom d'attribut.

<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写：
<a :href="http://www.cnblogs.com/">博客园首页</a>

2. Le délimiteur par défaut de la classe de liaison dynamique

vue est {{ }} La chaîne dans le délimiteur sera considérée comme une variable de données et peut être transmise via class =. La méthode "{{ className }}" est utilisée pour définir la classe, mais Vue ne recommande pas de mélanger cette méthode avec la méthode v-bind:class. Vous ne pouvez choisir que l'une des deux. Bien que v-bind:class ne puisse pas coexister avec la méthode de liaison de variables dans l'attribut class, elle peut coexister avec la fonctionnalité de classe native. La classe native et v-bind:class peuvent apparaître en même temps dans une balise DOM.

2.1 v-bind:class prend en charge le type chaîne. Il n'est pas recommandé de l'utiliser car la valeur de la chaîne est fixe et ne peut pas changer dynamiquement la classe

HTML代码：
<div :class=" &#39;classA classB&#39; ">Demo1</div>
渲染后的HTML:
<div class="classA classB">Demo1</div>

2.2 v-bind. :class prend en charge les variables de données. Lorsque la valeur de la variable change, la classe sera mise à jour en même temps. La valeur de la directive v-bind:class est limitée à une expression de liaison, telle que l'expression javascript

HTML代码：
<div :class="classA">Demo2</div>
Javascript代码：
data: {
 classA: &#39;class-a&#39; //当classA改变时将更新class
}
渲染后的HTML:
<div class="class-a">Demo2</div>

La valeur écrite dans la directive sera considérée comme une expression, telle qu'une expression javascript. , donc v-bind :class accepte les opérations ternaires :

HTML代码：
<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>
渲染后的HTML:
<div class="class-a">Demo3</div>

2.3 v-bind:class prend en charge les objets et sera mis à jour dynamiquement lorsque la classe de l'objet change

HTML代码：
<div :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</div>
Javascript代码：
data: {
 isA: false, //当isA改变时，将更新class
 isB: true //当isB改变时，将更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>

HTML代码：
<div :class="objectClass">Demo5</div>
Javascript代码：
data: {
 objectClass: {
 class-a: true,
 class-b: false
 }
}
渲染后的HTML:
<div class="class-a">Demo5</div>

HTML代码：
<div :class="[classA, classB]">Demo6</div>
Javascript代码：
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}
渲染后的HTML:
<div class="class-a class-b">Demo6</div>

HTML代码：
<div :class="[classA, classB]">Demo7</div>
Javascript代码：
data: {
 classA: &#39;class-a&#39;,
 objectClass: {
 classB: &#39;class-b&#39;, // classB 的值为class-b, 则将classB的值添加到class列表
 classC: false, // classC值为false,将不添加classC
 classD: true // classD 值为true，classC将被直接添加到class列表
}
}
渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>