Class is bound to Style
The class list and inline style of operation elements are a common requirement of data binding. Because they are all attribute s, we can handle them with v-bind: we just need to calculate the string result through the expression. However, string splicing is cumbersome and error prone. Therefore, when using v-bind for class and style, Vue JS has been specially enhanced. In addition to strings, the type of expression results can also be objects or arrays.

Object syntax
We can pass an object to v-bind:class to dynamically switch class:

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

The above syntax indicates that whether the active class exists or not will depend on the truth of the data property isActive.

You can dynamically switch multiple fields in the incoming class. In addition, the v-bind:class instruction can also coexist with the ordinary class attribute. When there are the following templates:

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

And the following data:

data: {
  isActive: true,
  hasError: false
}

The result is rendered as:

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

When isActive or hasError changes, the class list will be updated accordingly. For example, if the value of hasError is true, the class list will change to "static active text danger".

The bound data object does not need to be defined inline in the template:

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

The rendering result is the same as above. We can also bind a calculated property of the return object here. This is a common and powerful pattern:

<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
We can pass an array to v-bind:class to apply a class list:

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Render as:

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

If you also want to switch class es in the list according to conditions, you can use a ternary expression:

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

Writing this way will always add errorClass, but only add activeClass if isActive is true [1].

However, it is cumbersome to write this when there are multiple conditional class es. Therefore, object syntax can also be used in array syntax:

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

Used on components
This chapter assumes that you have a certain understanding of Vue components. Of course, you can skip here and look back later.

When using class property on a custom component, these classes will be added to the root element of the component. Existing classes on this element will not be overwritten.

For example, if you declare this component:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

Then add some class es when using it:

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

The HTML will be rendered as:

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

The same applies to class es with data binding:

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive is true [1], HTML will be rendered as:

Hi

Binding inline style object syntax v-bind:style's object syntax is very intuitive -- it looks very much like CSS, but it's actually a JavaScript object. CSS property names can be named with camel case or kebab case (remember to enclose them in quotation marks):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

It is usually better to bind directly to a style object, which makes the template clearer:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Similarly, object syntax is often used in conjunction with the calculated properties of the returned object.

Array syntax
The array syntax of v-bind:style can apply multiple style objects to the same element:

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

Auto prefix
When v-bind:style uses CSS properties that need to add browser engine prefix, such as transform, Vue JS will automatically detect and add the corresponding prefix.

Multiple value
2.3.0+

From 2.3.0, you can provide an array containing multiple values for property in style binding, which is often used to provide multiple prefixed values, such as:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

This will render only the last value in the array that is supported by the browser. In this example, if the browser supports flexbox without browser prefix, only display: flex will be rendered.