n How to use class and style bindings in vuejs | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

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}">


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>
  styleObject: {


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>



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.

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook