Vue binds the class and style modes

1. The binding Class

1.1 Direct Mode

<div v-bind:class="active"></div>/ / active as a variableCopy the code

Application scenario: The class name is uncertain

1.2 Binding Objects

<div v-bind:class="{ active: isActive }"></div>// Active is a string of charactersCopy the code

Whether class isActive depends on whether isActive is true or false

Application scenario: The class name is certain but does not exist

1.3 Combination of the above two methods

Class does not conflict

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>// String with a hyphen in bind object mode needs to be quoted with 'text-danger'Copy the code

data: {
  isActive: true.hasError: true
}
Copy the code

The results for

<div class="static active text-danger"></div>
Copy the code

1.4 Binding an array

<div v-bind:class="[activeClass, 'classA']"></div>//"[javascript syntax], activeClass is a variable, classA is a string"Copy the code

data: {
  activeClass: 'active',}Copy the code

The results for

<div class="active classA"></div>
Copy the code

1.5 Binding On Components

Use within a custom component and bind on the root element of the component do not conflict and can be superimposed

2. The binding Style

2.1 Direct Mode

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

data: {
  styleObject: {
    color: 'red'.fontSize: '13px'}}Copy the code

2.2 Binding Objects

The binding is a JavaScript object

<div v-bind:style="{ color: myColor, fontSize: mySize + 'px' }"></div>
Copy the code

data: {
  myColor: 'red'.mySize: 30
}
Copy the code

2.3 Binding arrays

Multiple style objects can be applied to the same element

<div v-bind:style="[stylesOne, stylesTwo]"></div>
Copy the code

---

For details, see the official Vue documentation: cn.vuejs.org/v2/guide/cl…