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

Le cœur de Vue.js est un Système de liaison de données , qui nous permet d'utiliser une syntaxe spéciale dans les modèles HTML ordinaires pour "lier" le DOM aux données sous-jacentes. Le DOM lié sera synchronisé avec les données, à chaque fois les données changent, la vue DOM correspondante sera également mise à jour en fonction de cette fonctionnalité, liaison dynamique via vue.js Defining <.>class devient très simple. 🎜>les instructions vue sont marquées du préfixe v- L'instruction de liaison de données v-bind:attribute
name, abrégée en : nom d'attribut. Un exemple simple de liaison de données est le suivant :

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

vue est {{ }}, et la string
dans le délimiteur sera prise en compte. Pour les données

variables

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

, vous pouvez définir la classe via class="{{ className }}", mais vue ne recommande pas de mélanger cette méthode avec v -bind:class. Les deux ne peuvent être que

Choisissez-en un. Bien que v-bind:class ne puisse pas coexister avec la méthode de liaison des variables dans l'attribut de classe, il peut coexister avec l'attribut de classe natif. et v-bind:class sont autorisés à apparaître dans une balise DOM
2.1 v-bind:class prend en charge le type string Il n'est pas recommandé de l'utiliser car le type. la valeur de la chaîne est fixe et ne peut pas changer dynamiquement la classe

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 à l'expression de liaison , telle que javascriptexpression

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

.

La valeur écrite dans la commande sera considérée comme une expression, telle qu'une expression javascript, donc v-bind:class accepte les opérations ternaires : 2.3 v-bind:class prend en charge
object

, et class<🎜 sera mis à jour dynamiquement lorsque l'objet change >

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

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

<. 🎜>2.4 : v-bind:class prend en charge array
, lorsque les variables du tableau changent, la liste des classes sera mise à jour dynamiquement

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

Le tableau peut contenir le type

classe d'objet

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

, et l'

objet objetLe changement mettra également à jour la liste des classes

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!