How to dynamically bind classes in vue? Method introduction

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 synchronized with the data. Whenever the data changes, the corresponding DOM view will also 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, abbreviation is : attribute name, a simple data binding example is as follows:

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

2. The default separator for dynamic binding class

vue is {{ }}, the string inside the delimiter will be considered a data variable. You can set the class through class="{{ className }}", but vue does not recommend this method with v- bind:class methods are mixed, you can only choose one of them.

v-bind:class Although it 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 are allowed to appear at the same time in a DOM tag. -bind:class.

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:

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 a javascript expression

HTML code:

<div :class="classA">Demo2</div>

Javascript code:

data: {
  classA: 'class-a'  //当classA改变时将更新class
}

Rendered HTML:

<div class="class-a">Demo2</div>

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

HTML code:

<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>

Rendered HTML:

<div class="class-a">Demo3</div>

2.3 v-bind:class supports objects, and the class will be dynamically updated when the object changes

HTML code:

<div :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</div>

Javascript code:

data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

Rendered HTML:

<div class="class-b">Demo4</div>

HTML code:

<div :class="objectClass">Demo5</div>

Javascript code:

data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

Rendered HTML:

<div class="class-a">Demo5</div>

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

HTML code:

<div :class="[classA, classB]">Demo6</div>

Javascript code:

data: {
  classA: 'class-a',
  classB: 'class-b'
}

Rendered 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 code:

<div :class="[classA, classB]">Demo7</div>

Javascript code:

data: {
  classA: 'class-a',
  objectClass: {
    classB: 'class-b',  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true，classC将被直接添加到class列表
}
}

Rendered HTML:

<div class="class-a class-b classD">Demo7</div>

Related recommendations:

2020 front-end vue interview questions Big summary (with answers)

vue tutorial recommendation: the latest 5 vue.js video tutorial selections in 2020

More programming related For knowledge, please visit: programming teaching! !

The above is the detailed content of How to dynamically bind classes in vue? Method introduction. For more information, please follow other related articles on the PHP Chinese website!