Class and Style binding


Directory


#Bind HTML Class

Object syntax
We can pass

v-bind:class

an object to dynamically switch classes: 

<div v-bind:class="{ active: isActive }"></div>
The above syntax means

active

Whether the class exists or not will depend on The truthiness of data attribute isActive. You can pass more attributes in the object to dynamically switch multiple classes. Additionally, the

v-bind:class

directive can also coexist with the normal class attribute. When there is 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 result is rendered as: 

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

when

isActive

or hasError When changed, the class list will be updated accordingly. For example, if hasError evaluates to true, the class list becomes "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

computed property

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 SyntaxWe can put an array Pass it to

v-bind:class

to apply a class list: 

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

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

If you also want to switch the classes in the list based on conditions, you can Use a ternary expression: 

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

Writing like this will always add

errorClass

, but only if isActive is truthy[1] Only add activeClass. However, it is a bit cumbersome to write like this when there are multiple conditional classes. So 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 already learned about Vue componentsHave some knowledge. Of course, you can also skip here and come back to it later.

When using the class attribute on a custom component, these classes will be added to the root element of the component. Classes that already exist 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>'
})

and then add some classes when using it: 

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

HTML will be rendered as: 

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

The same applies to classes with data binding: 

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

When isActive is truthy[1], HTML will be rendered Becomes: 

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


Binding Inline Style

Object Syntax# The object syntax of

##v-bind:style is very intuitive - it looks very like CSS, but it is actually a JavaScript object. CSS property names can be named in camelCase or kebab-case (remember to enclose them in quotes): 

<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 will make Templates are clearer: 

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

Similarly, object syntax is often used in conjunction with computed properties that return objects.


Array syntax

The array syntax of v-bind:style is OK Apply multiple style objects to the same element: 

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


Automatically add prefix

When

v-bind:style When using CSS properties that require adding browser engine prefix, such as transform, Vue.js will automatically detect and add the corresponding prefix .


Multiple values

##2.3.0

From 2.3.0 onwards you can provide an array containing multiple values ​​for the property in the
style

binding, which is often used to provide multiple prefixed values, for example: 

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Write like this Only the last value in the array supported by the browser will be rendered. In this example, if the browser supports flexbox without the browser prefix, then only

display: flex

will be rendered.


Translator’s Note

[1] truthy is not

true

, see MDN# for details ## explanation of.