v-bind绑定

v-bind 指令用于响应式地更新 HTML attribute。

基本用法

<button v-bind:disabled="isDisabled">点击</button>

<!-- 简写 -->
<button :disabled="isDisabled">点击</button>

绑定 class

对象语法

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

对应数据：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

数组语法

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

绑定 style

对象语法

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

数组语法

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

绑定布尔值 Attribute

<button :disabled="isDisabled">按钮</button>

当 isDisabled 为 falsy 值时，attribute 会被移除。

要点总结

• v-bind 简写为 :，用于动态绑定 attribute
• class 绑定支持对象语法和数组语法
• style 绑定同样支持对象和数组形式
• 布尔值 attribute 根据值的真假自动添加或移除