[JavaScript知识库]Vue2 中 Class 和 Style 绑定的使用

Class 和 Style 的绑定

操作元素的 class 列表和内联样式(style)是数据绑定的一个常见需求。
因为它们都是 attribute ，所以我们可以用 v-bind ，处理它们只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind 是 vue 的一个指令，用于绑定html属性

ps: 对于 v-bind:class 我们常使用其缩写形式:class，这是v-bind的缩写，也就是在属性的前面添加:；
类似的还有v-on:click，我们也常用其缩写@click，也就是在属性的前面添加@；

对象语法

我们可以传给 :class 一个对象，以动态地切换 class：

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

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。

你可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class attribute 共存。当有如下模板：

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

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

当 isActive或者 hasError变化时，class列表将相应地更新。
例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。

绑定的数据对象不必内联定义在模板里：

<div :class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<div :class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

我们可以把一个数组传给 :class，以应用一个class列表：

<div :class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

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

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1]时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

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

同理style的绑定也是如此

end