A common requirement for data binding is the class list of the operation elements and its inline style. Because they are all attributes, we can handle them with v-bind: just calculate the final string of the expression. However, string splicing is troublesome and easy to make mistakes. Therefore, Vue.js specifically enhances it when v-bind is used for class and style. The result type of an expression can be an object or an array in addition to a string.
Bind HTML Class
Although you can use the Mustache tag to bind class, such as `{% raw %}class="{{ className }}"{% endraw %}`, we do not recommend this writing method and `v-bind:class`. Only one of the two can be chosen!
Object Syntax
We can pass an object to v-bind:class to switch class dynamically. Note that the v-bind:class directive can coexist with ordinary class features:
<div v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>data: { isA: true, isB: false}Rendered as:
<div></div>
When isA and isB change, the class list will be updated accordingly. For example, if isB becomes true, the class list will become "static class-a class-b".
You can also directly bind an object in the data:
<div v-bind:class="classObject"></div>data: { classObject: { 'class-a': true, 'class-b': false }}We can also bind a computed property that returns the object here. This is a commonly used and powerful mode.
Array Syntax
We can pass an array to v-bind:class to apply a class list:
<div v-bind:class="[classA, classB]">data: { classA: 'class-a', classB: 'class-b'}Rendered as:
<div></div>
If you also want to switch the class in the list according to the conditions, you can use a ternary expression:
<div v-bind:class="[classA, isB ? classB : '']">
This example always adds classA, but classB only if isB is true.
However, writing this way is a bit cumbersome when there are multiple conditional classes. In 1.0.19+, object syntax can be used in array syntax:
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
Bind inline styles
Object Syntax
The object syntax of v-bind:style is very intuitive - it looks very similar to CSS, but it is actually a JavaScript object. CSS attribute names can be named by camelCase or short horizontal separation (kebab-case):
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30}It is usually better to bind directly to a style object, making the template clearer:
<div v-bind:style="styleObject"></div>data: { styleObject: { color: 'red', fontSize: '13px' }}Similarly, object syntax is often used in conjunction with the computed properties of the returned object.
Array Syntax
v-bind:style's array syntax can apply multiple style objects to one element:
<div v-bind:style="[styleObjectA, styleObjectB]">
Automatically add prefixes
When v-bind:style uses CSS attributes that require vendor prefixes, such as transform, Vue.js will automatically detect and add the corresponding prefix.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
For more vue learning tutorials, please read the special topic "vue practical tutorial"
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.