Vue.js 中的 class 与 style 绑定有哪些方式？

在 Vue.js 中,有多种方式可以绑定 class 与 style:

class 绑定:

1. 对象语法:

html
<div :class="{ active: isActive }"></div>

2. 数组语法:

html 
<div :class="[activeClass, errorClass]"></div>  

3. 用计算属性返回对象或数组:

js
computed: {
  classObject() {
    return {
      active: this.isActive,
      disabled: this.isDisabled  
    }
  }
}

html
<div :class="classObject"></div>

style 绑定:

1. 对象语法:

html
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2. 数组语法:

html
<div :style="[baseStyles, overridingStyles]"></div>  

3. 用计算属性返回对象:

js
computed: {
  styleObject() {
    return {
      color: this.activeColor,
      fontSize: this.fontSize + 'px'
    }
  }  
} 

html 
<div :style="styleObject"></div>

示例:

html
<div 
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  :class="[colorClass, { disabled: isDisabled }]"
> 
</div>

class 和 style 绑定可以让我们在元素中绑定动态的 class 名和行内样式。我们可以根据组件状态或计算属性的值切换 class 名或更新 style。
理解 class 与 style 绑定的各种语法,可以让我们在 Vue.js 中实现动态的视图效果,开发出更加丰富的组件。