Dynamic Binding of Classes and Styles in Vue.js!

We know how to attach classes to a tag. But what if we want to do so dynamically. For this we can use the v-bind directive with class. v-bind can be used along with style to apply styles dynamically.

Classes

Object Syntax

We pass an object to v-bind:class where the key is the name of the class and the value is a boolean to decide whether we want to display the class or not.

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

So if isActive is true, the class active gets attached to the node.

We can also have multiple classes by having more fields in the object that is being passed. For the given template,

<div class="box" v-bind:class="{ active: isActive, redBorder: hasError }"></div>

And the following data,

data: {
  isActive: true,
  hasError: false
}

The rendered node will look like this.

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

When hasError become true, hasError class will get tagged on.

The object doesn’t have to be inline. It can be stored in data and then be accessed in the template. We could also use the computed property to return the object.

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

data: {
  classObject: {
    active: true,
    redBorder: false
  }
}

Or with computed properties:

data: {
  isActive: true,
  hasError: false
},
computed: {
  classObject: function() {
    return {
      active: this.isActive,
      redBorder: this.hasError
    }
  }
}

Array Syntax

We can also pass classes to a node by an array. This is extremely useful when we have a list of classes to apply.

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

data: {
  activeClass: 'active',
  errorClass: 'redBorder'
}

This will render:

<div class="box isActive hasError"></div>

You could also have objects in these arrays which can be useful in case of dynamically attaching classes.

<div class="box" v-bind:class="[ { active: isActive }, errorClass ]"></div>

data: {
  isActive: true,
  errorClass: 'redBorder'
}

Inline Styles

Object Syntax

Similar to the case of classes, we can pass an object to v-bind:style. CSS properties can be either camelCase or kebab-case(mention within quotes).

<div class="box" v-bind:style="{ backgroundColor: currentColor, fontSize: fontSize + 'px' }"></div>

data: {
  currentColor: 'red',
  fontSize: 30
}

You could also bind style through an object from data property or through a computed property that returns an object.

<div class="box" v-bind:style="styleObject"></div>

data: {
  styleObject: {
    backgroundColor: 'red',
    color: 'white'
    fontSize: 30 + 'px'
  }
  
}

Array Syntax

We can also pass multiple style objects to v-bind:style with the help of an array.

<div class="box" v-bind:style="[ blandStyle, dashingStyle]"></div>

As an exercise, you could create events to change the colour of the background and text of a div. For example, a click event changes the colour of a div from red to green and back and forth. And to take a step further, try creating a progress bar! Good luck!

A blog by Gautham Lal where he documents his journey of learning Vue from the prespective of a Vue Newbie.