Vue.js Class and Style Bindings: Dynamically Manage CSS

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: here our expressions calculate only the final strings.

Meddling with string concatenation is however, error-prone and annoying. Thus Vue provides special enhancements when v-bind is used with the class and the style. Expressions also evaluates to objects and arrays not just strings.

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]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

This renders:

<div class="active text-danger"></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

I will assume you have a knowledge of Vue Components for this section.

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('my-component', {
  template: '>p class="foo bar">Hi</p>'
})

And we also add some classes when using the component:

<my-component class="baz boo"></my-component>

This results in the HTML below:

<p class="foo bar baz boo"<Hi</p>

This is also the case for class binding:

<my-component v-bind:class="{ active: isActive }"></my-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.

Previous: Vue.js Computed Properties and Watchers: Managing Complex Logic.
Next: Vue.js Conditional Rendering.