class and style of vue

Keywords: Attribute Vue

This article refers to the official documents of vuejs, combined with their own understanding of the collation of reading notes!

When v-bind is used for class and style, the result of an expression can be an object or an array in addition to a string

Object syntax

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

// The class name here is' active ', which is controlled by the true or false value of the variable isActive
// There is also a common class attribute. The class name is static
// When the variable value of class name changes, the class value of div will change in response

// Bound data objects do not need to be defined inline in the template
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    // Since 'text danger' is not the correct way to write identifiers, quotation marks are required. Quotation marks are recommended
    'text-danger': false

// You can also bind a calculated property of the return object
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
computed: {
  classObject: function () {
    return {
      // When the expression is relatively complex or class depends on many variables, it is recommended to use the writing method of calculation attribute, which is clear and easy to maintain
      active: this.isActive && !this.error,
      'text text-danger': this.error && this.error.type === 'fatal'

Array syntax

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
// Here, the display of 'active' class is controlled by expression, while 'text danger' always exists, so it is recommended to write as follows
<div v-bind:class="[isActive ? activeClass : '']" class='text-danger'></div>

// When there are multiple conditions to control the display of the 'active' class, the expression will undoubtedly be very complex, so I think it's not as elegant as directly using the object syntax to calculate the properties

For components

When the class attribute is used on a custom component, these classes are added to the root element of the component. Classes that already exist on this element will not be overwritten

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

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

// It will be rendered as' foo bar baz boo ', and the original' foo bar 'class name of p tag will not be overwritten
<p class="foo bar baz boo">Hi</p>

Add prefix automatically

When v-bind:style uses CSS properties that need to be prefixed by browser engine, such as transform, Vue.js will automatically detect and add corresponding prefixes

Binding inline style - object syntax

The best way to use row style is to use object syntax calculation attributes. One of the advantages of row style is that it has higher weight than class

<div v-bind:style="styleObject"></div>

computed: {
  styleObject() {
    return {
      color: 'red',
      fontSize: '13px'

Posted by thenewguy on Thu, 13 Feb 2020 12:14:12 -0800