VUE entry (5)

Class and Style Bind

Class lists and inline style operating element is a common demand for data binding. Because they are property, so we can  v-bind deal with them: just need to figure out the string can result through expression. However, string concatenation cumbersome and error-prone. Therefore, when  v-bind used  class and  style when, Vue.js do a special enhancements. In addition to the result of the expression of type string, and it may be an object or an array.

Binding HTML Class

Object syntax

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

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

Syntax above indicates  active the presence or absence of data will depend on the properties of this class  isActive of  truthiness (true value).

You can pass more properties in the object to dynamically switch between multiple class. Furthermore, v-bind:class instructions may also co-exist with conventional class attribute. When the following template:

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

And the following data:

data: {
  isActive: true,
  hasError: false
}

The results are rendered as:

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

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

Binding data objects need not defined inline in a template:

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

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

Rendering the results the same as above. Here we can also bind a target return of computing property . 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  v-bind:classto apply a class list:

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

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

Rendered as:

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

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 a truthy [1]  when added  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>

Used in the assembly

When used in a custom component  class when the properties, these classes will be added to the root element of the assembly above. This element existing classes will not be overwritten.

For example, if you declare the components:

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

Then add some class when using it:

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

HTML will be rendered as:

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

For with data binding class also apply:

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

When  isActive is truthy [. 1]  when, HTML is rendered become:

<p class="foo bar active">Hi</p>

Binding inline style

Object syntax

v-bind:style The 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'
  }
}

Similarly, the object returned object syntax often combined use calculated property.

Array syntax

v-bind:style The array syntax can be multiple style objects apply to the same elements:

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

Automatically add a prefix

When  v-bind:style you are using the need to add browser engine prefix when CSS properties, such as  transform, Vue.js will automatically detect and add the appropriate prefix.

Multiple values

2.3.0+

From 2.3.0 you can  style provide a binding array includes a plurality of property values, commonly used to provide a plurality of prefixed values, for example:

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

Write only the last value in the array to render a supported browser. In this case, if the browser supports flexbox browser without prefix, then it will render  display: flex.