数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。
绑定 HTML class
绑定对象
我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：
<div :class="{ active: isActive }"></div>
上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：
const isActive = ref(true) const hasError = ref(false)
<div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div>
渲染的结果会是：
<div class="static active"></div>
当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。
绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：
const classObject = reactive({ active: true, 'text-danger': false }) <div :class="classObject"></div>
这将渲染：
<div class="active"></div>
我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：
const isActive = ref(true) const error = ref(null) const classObject = computed(() => ({ active: isActive.value && !error.value, 'text-danger': error.value && error.value.type === 'fatal' }))<div :class="classObject"></div>
绑定数组
我们可以给 :class 绑定一个数组来渲染多个 CSS class：
const activeClass = ref('active') const errorClass = ref('text-danger')<div :class="[activeClass, errorClass]"></div>
渲染的结果是：
<div class="active text-danger"></div>
如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：
<div :class="[isActive ? activeClass : '', errorClass]"></div>
errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。
然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：
<div :class="[{ active: isActive }, errorClass]"></div>
