Most commonly, we need data-binding when manipulating an element's class list and its inline styles. Because both of them are attributes, we can use the v-bind directive to handle them.
Binding HTML Classes
Object Syntax
We can dynamically toggle classes, by passing an object to the v-bind:class:
<div v-bind:class="{active: isActive}"></div>
The presence of the active class is determined by the truthiness of the isActive data property.
Multiple classes can be toggled by having more fields in the object, the v-bind:class can co-exist with plain class attribute:
<div class="static"
v-bind:class="{active: isActive, 'text-danger': hasError}">
</div>
With the following data:
data: { isActive: true, hasError: false }This will render:<div class="static active"></div>
The class list is updated once the data properties change. For instance, when hasError is false, the class list changes to static active text-danger.
The bound object must not be inline:
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,'text-danger': false
}
}
Additionally, we can 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
To apply a list of classes, we can pass an array to v-bind:class
<div v-bind:class="[activeClass, errorClass, 'test']"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
This renders:
<div class="active text-danger test"></div>
A ternary expression can be used to toggle a class conditionally:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
The above code will apply activeClass once isActive is truthy, but errorClass is always applied.
The above code can be simplified using object syntax:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
With Components
When we use the class attribute on a custom component, the classes will be added to the component's role element. This will not overwrite the classes in the element.
Take for instance, when we declare this component:
Vue.component('custom-component', {
template: '<p class="foo bar">Hi</p>'
})
And we also add some classes when using the component:
<custom-component class="baz boo"></custom-component>
This results in the HTML below:
<p class="foo bar baz boo">Hi</p>
This is also the case for class binding:
<custom-component v-bind:class="{ active: isActive }"></custom-component>
The HTML that will be rendered when isActive is truthy will be:
<p class="foo bar active">Hi</p>
Binding Inline Styles
Object Syntax
v-bind has a pretty straightforward object syntax- it is almost like CSS, but it is a JavaScript object. For the CSS property name, we can use either kebab-case or camelCase:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
Most often, to achieve a cleaner template, it is a good idea to bind to the style object directly:
<div v-bind:style="styleObject"></div>
data:{
styleObject: {
color:'red',
fontSize:'13px'
}
}
Array Syntax
The array syntax for v-bind:style will allow us to apply multiple style objects to an element:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
Auto-prefixing
Vue automatically detects and add appropriate prefixes to CSS properties that require vendor prefixes in v-bind:style.
Multiple Values
<div v-bind:style="{display: ['-webkit-box', '-ms-flexbox', 'flex'] }">>/div>
The above snippet will only render the last value in array which the browser supports.
