Classes and Styles

Class and Style Bindings allows for class and style manipulation. Like other attributes, Vue data is bound to class and style attributes with an enhanced version of the v-bind directive, which can evaluate expressions, objects, and arrays.

Class Bindings

When using the v-bind directive with the class attribute, it is possible to use an Object or an Array syntax instead of manipulated a string.

Object Syntax

The object syntax allows classes to be added based on the truthiness of the provided expression. The class (the object key) will be added if the expression (the object value) evaluates to true.

<a href="#" v-bind:class="{ active: isActive }">About</a>

In the example above, the class active will be added to the element if the isActive data property of the Vue instance is truthy.

You can toggle more classes by adding additional properties to the object.

::: NOTE If the class name has a dash (-), it will need to be placed in quotes. :::

<a href="#" v-bind:class="{ active: isActive, 'link-home': isHome }">About</a>

A full example, might look something like this:

<div id="app">
  <nav class="nav">
    <a v-for="link in links" href="#" class="nav-link" v-bind:class="{ active: link.isActive, 'home': link.isHome }">{{ link.title }}</a>
  </nav>
</div>

const app = new Vue({
  el: '#app',
  data: {
    links: [
      { title: 'Home', isActive: false, isHome: true},
      { title: 'About', isActive: true, isHome: false}
    ]
  }
})

Array Syntax

An array can be used to apply a list of classes from data properties to an element.

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

The data property will replaced with there values and will be render as the following:

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

Using the array syntax can be an effective way of added multiple classes to an element render in a list, as in the following example.

<div id="app">
  <div class="buttons">
    <button 
       v-for="button in buttons" 
       class="btn" 
       v-bind:class="[button.sizeClass, button.colorClass]"
          >{{ button.text }}</button>
  </div>
</div>

const app = new Vue({
  el: '#app',
  data: {
    buttons: [
      { text: "Large Button", sizeClass: 'btn-lg', colorClass: 'btn-primary' },
      { text: "Small Button", sizeClass: 'btn-sm', colorClass: 'btn-danger' },
      { text: "Normal Button", sizeClass: '', colorClass: 'btn-secondary' },
    ]
  }
})

Style Bindings

Binding the inline style attribute of an HTML element allows for dynamic styles to be added to an element.

const app = Vue.createApp({
  data: function () {
    return { 
      activeColor: 'red',
      activeSize: '24px'
    }
  }
})

const vm = app.mount('#app')

<div id="app">
  <div :style="'color: ' + activeColor +
      '; font-size: ' + activeSize">
    Hello
  </div>
</div>

While using dynamic strings, as seen above, does work to set the style attribute, it can be difficult to read. That is why the object syntax is usually preferred.

const app = Vue.createApp({
  data: function () {
    return { 
      activeColor: 'red',
      activeSize: '24px'
    }
  }
})

const vm = app.mount('#app')

<div id="app">
  <div :style="{color: activeColor, 
      'font-size': activeSize }">
    Hello
  </div>
</div>

Finally, it is also possible to use an object itself to set the style attribute.

const app = Vue.createApp({
  data: function () {
    return { 
      active: {
        color: 'red', 
        fontSize : '24px' 
      }  
    }
  }
})

const vm = app.mount('#app')

<div id="app">
  <div :style="active">
    Hello
  </div>
</div>