v-bind:class绑定对象时键为类名、值为布尔表达式，响应式数据决定类是否渲染；数组用法中静态类应写在class属性，动态部分用v-bind:class管理；复杂逻辑应提取为计算属性；动态键名需注意响应式丢失。
用 v-bind:class 绑定对象时，键是类名，值是布尔表达式
Vue 会根据值的真假决定是否渲染对应类名。常见错误是把字符串直接当键名写死，或误用响应式数据未触发更新。
比如：data 中有 isActive 和 hasError，想动态控制 active 和 error 类：
<div v-bind:class="{ active: isActive, error: hasError }"></div>
- 键（
active、error）必须是合法 CSS 类名，不能带空格、特殊符号 - 值（
isActive、hasError）必须是响应式数据或计算属性，普通变量不会更新 - 如果值是
null、undefined或false，该类不会被添加；true或非空字符串才会生效
绑定数组时，混合静态类名和动态类名要拆开写
很多人试图在数组里直接写 "static-class" + { dynamic: flag }，结果报错或不生效——v-bind:class 的数组项只能是字符串、对象或返回它们的函数。
正确写法是把静态类名单独提出来，用空格拼接或拆成独立数组项：
立即学习“前端免费学习笔记（深入）”；
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
<div class="static-class" :class="[isActive ? 'active' : '', { error: hasError }]></div>
- 不要写成
:class="['static-class', { error: hasError }]"—— 这样静态类会被覆盖，除非你在class属性里显式声明 - 更稳妥的是：静态类写在
class属性，动态部分只用v-bind:class管理 - 数组中支持三元表达式、函数调用（如
getClassNames()），但函数必须返回字符串或对象
计算属性返回对象比内联对象更利于复用和逻辑收敛
当类名逻辑变复杂（比如依赖多个响应式字段、需要条件嵌套），内联对象很快变得难读且无法复用。此时应提取为计算属性。
例如按钮状态影响多个类名：
computed: {
buttonClass() {
return {
'btn': true,
'btn-primary': this.type === 'primary',
'btn-disabled': this.disabled || this.loading,
'btn-loading': this.loading
}
}
}
模板中直接用：
<button :class="buttonClass">提交</button>
- 计算属性自动缓存，比每次渲染都执行内联对象更高效
- 所有类名控制逻辑集中一处，便于测试和修改
- 注意不要在计算属性里写副作用（如
console.log或 API 调用），否则可能意外触发
用 Object.keys() 动态生成类名时要注意响应式丢失
有人想根据后端返回的类名数组动态挂载，比如 ['a', 'b', 'c'] → { a: true, b: true, c: true }，然后用 v-bind:class 绑定。问题在于：直接用 Object.assign({}, list) 或 list.reduce() 构造的对象不是响应式的。
- Vue 2 中，只有 data 初始化时声明的属性才是响应式；动态添加的键不会触发更新
- 解决方案：用
Vue.set逐个设置，或改用Array形式绑定（:class="classList"），避免对象键动态增删 - Vue 3 中可借助
reactive({})+Object.keys().forEach()，但仍建议优先用数组或计算属性封装逻辑
真正需要动态键名的场景很少，多数时候是设计上混淆了「类名集合」和「开关状态」——先厘清你要控制的是“哪些类该存在”，还是“某个类是否启用”。
