class and style of binding

If you want to switch according to the conditions in the list of class, can ternary expression:

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

Write will always add errorClass, but only in isActive is truthy [1] when you add activeClass.

However, when there are multiple conditions class wrote somewhat cumbersome. It can also be used in an array of object syntax syntax:

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

v-bind: style object syntax is very intuitive - looked very much like CSS, but in fact is a JavaScript object. CSS property name can be separated by a camel (camelCase) or dashes (kebab-case, remember quotes) is named:

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

Bind directly to a style object is usually better, it makes the template more clearly:

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