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:

博客园首页

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代码：
Demo1
渲染后的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:

Demo2

Javascript code:

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

Rendered HTML:

Demo2

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:

Demo3

Rendered HTML:

Demo3

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

HTML code:

Demo4

Javascript code:

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

Rendered HTML:

Demo4

HTML code:

Demo5

Javascript code:

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

Rendered HTML:

Demo5

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

HTML code:

Demo6

Javascript code:

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

Rendered HTML:

Demo6

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

HTML code:

Demo7

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:

Demo7

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!