Vue 中的 Class 与 Style 绑定详解1

在 Vue 中，数据绑定的一个常见场景是动态操纵元素的 CSS 类名(class)和内联样式(style)。虽然可以使用 v-bind 将它们与动态字符串绑定，但处理复杂绑定时，字符串拼接方式既麻烦又容易出错。为此，Vue 专门增强了 class 和 style 的 v-bind 用法，允许表达式的值为对象或数组，使动态样式管理更加灵活高效。

绑定 HTML class

绑定对象

我们可以给 :class（v-bind:class 的缩写）传递一个对象来动态切换 class：

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

解释：这里的语法表示 active 类是否存在，取决于数据属性 isActive 的真假值。当 isActive 为 true 时，元素会拥有 active 类；当为 false 时，则不会包含该类。

你可以在对象中包含多个字段来操作多个 class，并且 :class 指令也可以和普通的 class 属性共存：

// 数据
const isActive = ref(true)
const hasError = ref(false)

<divclass="static"  // 普通class属性:class="{ active: isActive, 'text-danger': hasError }"  // 动态class绑定
></div>

解释：static 类会始终存在，而 active 和 text-danger 类则根据 isActive 和 hasError 的值动态变化。上述代码渲染结果为：

<div class="sta