Article Directory
Binding of class and style
Manipulating the class list and inline styles of an element is a common requirement for data binding, because they are attributes, so we can handle them with v-bind: just calculate the string result through the expression. However, string concatenation is cumbersome and error-prone. Therefore, when using v-bind for class and style, Vue.js has made special enhancements. The type of the expression result can be an object or an array in addition to a string.
Binding HTML Class
Object syntax
We can pass an object to v-bind:class to dynamically switch classes
<div v-bind:class="{ active: isActive}"></div>
或者
<div :class="{active: isActive}"></div>
The above syntax indicates that the existence of the active class depends on the truthiness of the data attribute isActive , and more attributes can be passed in the object to dynamically switch between multiple classes. In addition, the v-bind:class directive can also coexist with ordinary class attributes. When you have the following template:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
and the following data:
data:{
isActice: true,
hasError: false
}
The rendered result is:
<div class="static active"></div>
When isActive or hasError changes, the class list will be updated accordingly. For example, if the value of hasError is true, the class list will become "static active text-danger".
Binding objects don't have to be defined inline in the template:
<div v-bind:class="classObject"></div>
或者
<div :class="classObject"></div>
data:{
classObject:{
active: true,
'text-danger': false
}
}
The rendered result is
<div class="active"><div>
The rendered result is the same as above. We can also bind a calculated property of the returned object here (commonly used)
Bind a computed property that returns an object
<div v-bind:class="classObject"></div>
data:{
isActive: true,
error:null
},
computed:{
classObject:function(){
return{
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type == 'fatal'
}
}
}
array syntax
We can pass an array to v-bind:class to apply a list of classes:
<div class="[activcClass, errorClass"></div>
data:{
activeClass:'active',
errorClass:'text-danger'
}
The rendered result is:
<div class="active text-danger"></div>
If you also want to switch the class in the list according to the condition, you can use a ternary expression:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
Writing in this way will always add errorClass, and activeClass will only add activeClass when isActive is true.
However, this is a bit cumbersome to write when there are multiple conditional classes. So in array syntax you can also use object syntax
<div class="[{active: isActive},errorClass]"></div>
used on components
When using the class attribute on a custom component, these classes will be added to the root element of the component. Existing classes on this element will not be overwritten. For example, if you declare this component:
Vue.components('myComponents',{
template:'<p class="foo bar">HI Comma</p>'
})
Then add some class when using it
<myComponents class="baz boo"></myComponents>
The resulting HTML will be rendered as:
<p class="foo bar baz boo">HI Comma</p>
The same applies to classes with data binding
<myComponents v-bind:class="{ active : isActive }"></myComponents>
When isActive is truthy, the HTML will be rendered as:
<p class="foo bar active">HI Comma</p>
Binding inline styles
Object Syntax The object
syntax of v-bind:class is very intuitive - it looks very CSS-like, but is actually a JavaScript object. CSS property names can be named in camelCase (camelClass) or dash-separated (kebab-case, remember to enclose them in quotation marks):
<div v-bind:style="{color: activeColor,fontSize: fontSize +'px'}"></div>
data:{
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
styleObject:{
color: "red",
fontSize:"13px",
}
Likewise, object syntax is often used in conjunction with computed properties that return objects.
array syntax
The array syntax of v-bind:style can apply multiple array objects to the same element
<div v-bind:style="[baseStyle,overridingStyles]"></div>
Automatically add prefixes
When v-bind:style uses CSS properties that need to add browser engine prefixes, such as transform, Vue.js will automatically detect and add corresponding prefixes.
Multiplicity
Since 2.3.0 you can provide an array of multiple values for a property in a style binding, often used to provide multiple prefixed values, for example:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Writing this way will only render the last value supported by the browser in the array. In this example, display: flex will only be rendered if the browser supports flexbox without the browser prefix.