Detailed introduction to Vue.js dynamic binding class

The core of Vue.js is a responsive Data binding system, which allows us to use special syntax in ordinary HTML templates to "bind" the DOM to the underlying data. The bound DOM will be synchronized with the data , whenever the data changes, the corresponding DOMview will alsoupdate. Based on this feature, it is dynamically bound through vue.js. Defining class 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. Dynamically bound classThe default delimiter of vue is {{ }}, and the
string in the delimiter will be considered as dataVariables, you can set the class through class="{{ className }}", but vue does not recommend this method to be mixed with v-bind:class, the two can only be

First. Although v-bind:class cannot coexist with the method of binding variables in the class attribute, it can coexist with the native class feature. Both native class and v-bind:class are allowed to appear in a DOM tag.

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

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

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 the binding expression, For example, javascriptexpression

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

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

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

2.3 v-bind:class supports object, class

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>

will be dynamically updated when the object changes

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

2.4: v-bind:class supports array. When the variables in the array change, the class list will be dynamically updated.

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

The array can contain

object class types. If the object object changes in the array, the class list will also be updated

HTML代码：
<p :class="[classA, classB]">Demo7</p>
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:
<p class="class-a class-b classD">Demo7</p>

The above is the detailed content of Detailed introduction to Vue.js dynamic binding class. For more information, please follow other related articles on the PHP Chinese website!