Vue Class 与 Style 绑定

简介

HTML 元素的 class 绑定 和内联样式绑定是数据绑定的一个常见需求。

由于字符串拼接麻烦且易错。因此，在用 v-bind 绑定 class 和 style 时，Vue.js 做了专门的增强。表达式的结果的类型除了字符串之外，还可以是对象或数组。

绑定 Class

对象语法

可以传给 v-bind:class 一个对象，来动态地切换 class。

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的布尔值。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。

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

当 data 为：

data: {
  isActive: true,
  hasError: false
}

时，渲染结果为：

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

给 Class 绑定一个返回值为对象的计算属性，是一种很常用且强大