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
attribute name, abbreviated as: attribute name, a simple data binding example is as follows:
1 2 3 |
|
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
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.
1 2 3 4 |
|
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
1 2 3 4 5 6 7 8 |
|
The value written in the instruction will be regarded as an expression, such as a javascript expression, so v-bind:class Accepts ternary arithmetic:
1 2 3 4 |
|
2.3 v-bind:class supports object, class
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 6 7 8 9 10 11 |
|
2.4: v-bind:class supports array. When the variables in the array change, the class list will be dynamically updated.
1 2 3 4 5 6 7 8 9 |
|
object class types. If the object object changes in the array, the class list will also be updated
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
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!