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

Object syntax

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

// 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

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

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'
    }
  }
}