How to get class in vue.js

Vue.js method to obtain class: 1. Use data binding, the code is [5102c642b2617b1455b25a8a79a95ccephp Chinese website4a11e5928b3688cf38c9163b657eb5ac]; 2. Dynamically bind class, the code is [00c00d88e3e2a473e6e9dae4ddf1a5e7De].

vue.js method of obtaining class:

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:

php中文网 简写： php中文网

2 , the delimiter of dynamic binding class

vue is {{ }} by default. The string in the delimiter will be considered as a data variable, which can be passedclass="{{ className }}"method to set class, but vue does not recommend mixing this method withv-bind:classmethod, 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 andv-bind:classare allowed to appear at the same time in a DOM tag.

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

HTML代码： 
Demo1
 渲染后的HTML: 
Demo1

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

HTML代码： 
Demo2
 Javascript代码： data: { classA: 'class-a' //当classA改变时将更新class } 渲染后的HTML: 
Demo2

The value written in the directive will be regarded as an expression, such as a javascript expression. Thereforev-bind:classaccepts ternary operations:

HTML代码： 
Demo3
 渲染后的HTML: 
Demo3

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

HTML code:

Demo4
 Javascript代码： data: { isA: false, //当isA改变时，将更新class isB: true //当isB改变时，将更新class } 渲染后的HTML: 
Demo4

HTML代码： 
Demo5
 Javascript代码： data: { objectClass: { class-a: true, class-b: false } } 渲染后的HTML: 
Demo5

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

HTML代码： 
Demo6
 Javascript代码： data: { classA: 'class-a', classB: 'class-b' } 渲染后的HTML: 
Demo6

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

HTML代码： 
Demo7
 Javascript代码： data: { classA: 'class-a', objectClass: { classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表 classC: false, // classC值为false,将不添加classC classD: true // classD 值为true，classC将被直接添加到class列表 } } 渲染后的HTML: 
Demo7

Related free learning recommendations:JavaScript(video)

The above is the detailed content of How to get class in vue.js. For more information, please follow other related articles on the PHP Chinese website!