Vue.js 2.0 Class is tied to Style

Class is tied to Style

A common requirement for data binding is the class list of action elements and their inline style. B ecause they are all properties, we can handle them with v-bind: we only need to evaluate the final string of the expression. H owever, string stitching trouble is easy to mistake. T herefore, when v-bind is used for class and style, the Vue .js specifically enhances it. The result type of an expression can be an object or array in addition to a string.

Bind HTML Class

The object syntax

We can pass it on to v-bind:class for an object to dynamically switch class.

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

The syntax above indicates that the update of classactive will depend on whether the data property isactive or not.

We can also pass in more properties in the object to dynamically switch multiple classes. I n addition, the v-bind:class instruction can coexist with the normal class property. Here's the template:

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

Here's the data:

data: {
  isActive: true,
  hasError: false
}

Rendered as:

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

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

You can also bind an object in the data directly:

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

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

The result of the rendering is the same as above. W e can also bind the calculated properties of the returned 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]">

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

Rendered as:

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

If you also want to switch classes in the list based on criteria, you can use a thynation expression:

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

This example always adds errorClass, but only if isActive is true.

However, writing this is a bit tedious when there are multiple conditions class. You can use object syntax in array syntax:

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

Used on components

The content of this section is to assume that you already have some knowledge of Vue components. Of course you can skip here and look back later.

When you use the class property on a custom component, these classes are added to the root element, and the classes that already exist on the element are not overwritten.

For example, if you declare this component:

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

Then add some classes when you use it:

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

HTML will eventually be rendered as:

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

The same applies to binding HTML class:

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

When isActive is true, HTML is rendered as:

<div class="foo bar active"></div>

The binding inline style

The object syntax

v-bind:style's object syntax is intuitive -- it looks very much like CSS, but it's actually a JavaScript object. The CSS property name can be named after a hump case or a short horizontal separation (kebab-case):

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

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

Binding directly to a style object is usually better to make 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 an element:

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

The prefix is added automatically

When v-bind:style uses CSS properties that require a specific prefix, such as transform, Vue.js automatically detects and adds the appropriate prefix.