v-bind动态class与style

v-bind 在 class 和 style 绑定上有特殊增强。

绑定 class

对象语法

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

对象键是类名，值是布尔值。

数组语法

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

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

混合使用

<div :class="[{ active: isActive }, errorClass]"></div>

绑定 style

对象语法

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

数组语法

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

自动前缀

Vue 会自动添加浏览器引擎前缀：

<div :style="{ transform: 'rotate(45deg)' }"></div>

要点总结

• class 绑定支持对象和数组语法
• style 绑定同样支持对象和数组
• Vue 自动添加 CSS 浏览器前缀
• 可混合使用多种绑定方式