Detailed explanation of Vue.js dynamic binding class

The core of Vue.js is a reactive data binding system that allows us to "bind" the DOM to the underlying data using special syntax in ordinary HTML templates. The bound DOM will be kept in sync with the data, and whenever the data changes, the corresponding DOM view will be updated. Based on this feature, dynamically binding classes through vue.js becomes very simple.

1. Data binding

vue instructions are marked with v- prefix. Data binding instructions v-bind: attribute name, abbreviated as: attribute name. A simple data binding example is as follows ：

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

2. The default delimiter for dynamic binding class

vue is {{ }}. The string in the delimiter will be considered a data variable and can be passed class=" {{ className }}" method to set class, but Vue does not recommend mixing this method with v-bind:class method. You can only choose one of the two. Although v-bind:class cannot coexist with the method of binding variables in the class attribute, it can coexist with the native class feature. The native class and v-bind:class are allowed to appear at the same time in a DOM tag.

2.1 v-bind:class supports string type. It is not recommended to use it because the string value is fixed and cannot dynamically change the class.

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

2.2 v-bind:class Supports data variables. When the variable value changes, the class will be updated at the same time. The value of the v-bind:class directive is limited to a binding expression, such as the javascript expression

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

. The value written in the directive will be regarded as an expression, such as a javascript expression, so v-bind:class Accepts ternary arithmetic:

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 supports objects, and class will be dynamically updated when the object changes

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>

2.4: v-bind:class supports arrays, and variables in the array change When the object is changed, the class list will be dynamically updated

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>

The array can contain the object type. If the object object in the array changes, the class list will also be updated

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>

The above is the entire content of this article. I hope this article will be more useful. The content can be of some help to everyone’s study or work. I also hope that more people will support the PHP Chinese website!

For more detailed articles related to Vue.js dynamic binding class, please pay attention to the PHP Chinese website!