vue:Class与Style绑定（实现复杂样式需求）

前言

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。

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

下面将分别使用对象和数组的形式，动态的绑定class列表和内联样式。

提醒

和通过表达式计算出字符串结果一样，使用对象或者数组动态绑定样式时使用的对象{ }或者数组[ ]同样是写在:claaa=或者:style=后的引号" "里。比如：
对象
<div :class="{ active: isActive }"></div>
数组
<div :class="[activeClass, errorClass]"></div>

个人理解

可以将对象里的样式变量放在data里，然后可以控制该样式变量的变化来实现复杂的样式需求。

一、绑定HTML Class

1.对象语法

1.1 语法

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

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness (真实性)。

1.2 对象语法的扩展：

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

实例：

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

data: {
   
  isActive: true,
  hasError: false
}

结果渲染为：

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

分析：
上面实例中需要注意两点

1. v-bind:class指令和普通的标签class属性（class="static"）共存了
2. v-bind:class指令本身也可以灵活的使用数