Vue.js Style Binding

Vue.js class

class and style are attributes of HTML elements, used to set the styling of elements. We can use v-bind to set style attributes.

Vue.js specifically enhances v-bind when handling class and style. In addition to strings, the result type of the expression can also be an object or an array.

class attribute binding

We can set an object for v-bind:class to dynamically toggle classes:

Example 1

In the example, setting isActive to true displays a green div block; if set to false, it will not display:

<div v-bind:class="{ 'active': isActive }"></div>

Try it »

The div class in the above example is:

<div class="active"></div>

We can also pass more properties in the object to dynamically toggle multiple classes.

Example 2

The text-danger class background color overrides the background color of the active class:

<div class="static" v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }"> </div>

Try it »

The div class in the above example is:

<div class="static active text-danger"></div>

We can also directly bind to an object in the data:

Example 3

The text-danger class background color overrides the background color of the active class:

<div id="app"> <div v-bind:class="classObject"></div> </div>

Try it »

Example 3 and Example 2 have the same rendering result.

In addition, we can also bind a computed property that returns an object here. This is a common and powerful pattern:

Example 4

new Vue({ el: '#app', data: { isActive: true, error: { value: true, type: 'fatal' } }, computed: { classObject: function () { return { base: true, active: this.isActive && !this.error.value, 'text-danger': this.error.value && this.error.type === 'fatal', } } } })

Try it »

Array Syntax

We can pass an array tov-bind:class, as shown in the following example:

Example 5

<div v-bind:class="[activeClass, errorClass]"></div>

Try it »

The div class in the above example is:

<div class="active text-danger"></div>

We can also use ternary expressions to toggle classes in the list:

Example 6

errorClass is always present; when isActive is true, the activeClass class is added:

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

Try it »

Vue.js style (Inline Styles)

We canv-bind:styledirectly set styles:

Example 7

<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Example Tutorial</div> </div>

Try it »

The div style in the above example is:

<div style="color: green; font-size: 30px;">Example</div>

You can also directly bind to a style object to make the template clearer:

Example 8

<div id="app"> <div v-bind:style="styleObject">Example Tutorial</div> </div>

Try it »

v-bind:style can use an array to apply multiple style objects to an element:

Example 9

<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">Example Tutorial</div> </div>

Try it »

Note: Whenv-bind:styleusing a CSS property that requires a specific prefix, such as transform, Vue.js will automatically detect and add the corresponding prefix.

Other Extensions