v-bind 是 Vue 中动态绑定 HTML 属性的核心指令，支持 :class 和 :style 的对象/数组语法，可结合 computed 提升可维护性，并需注意 class 叠加、style 覆盖、单位处理及 SSR 兼容性等细节。
v-bind 是 Vue 中绑定 HTML 属性的核心指令，常用于动态控制 class、style 等属性。它让样式不再写死，而是根据数据状态实时响应变化。
动态切换 class 类名
通过 v-bind:class（可简写为 :class），可以把对象或数组作为参数，按条件添加或移除类名。
- 对象语法：键是类名，值是布尔表达式；为 true 时生效
- 数组语法：混合静态类与动态类，支持三元运算或对象写法
- 示例：<div :class="{ active: isActive, 'text-danger': hasError }">
- 注意：对象中 key 若含短横线（如 text-danger），需加引号；驼峰命名可不加
绑定内联样式 style
v-bind:style（简写 :style）支持对象和数组两种写法，适配不同场景。
- 对象语法：属性名可驼峰（fontSize）或短横线加引号（'font-size'）
- 数组语法：合并多个样式对象，方便复用基础样式与条件样式
- 示例：<div :style="{ fontSize: size + 'px', color: textColor }">
- 推荐将复杂样式计算提取到 computed 中，保持模板简洁
结合计算属性与 Class/Style 复用
当样式逻辑变复杂（如多状态组合、主题切换），直接在模板里写判断会降低可读性。
立即学习“前端免费学习笔记（深入）”；
- 把 class 或 style 的生成逻辑移到 computed 中，返回对象或数组
- 例如：根据 status 字段返回不同背景色和文字色的对象样式
- 好处是逻辑集中、便于测试、模板更干净
- 避免在 :class/:style 中写过多表达式，尤其是嵌套三元或函数调用
注意事项与常见坑
使用 v-bind 控制样式时，有些细节容易忽略但影响效果。
- class 绑定不会覆盖元素原有的 class，而是叠加；但 style 绑定会完全替换内联 style
- 绑定 style 对象时，Vue 会自动添加浏览器前缀（如 transform → -webkit-transform）
- 不要在 :style 中直接写带单位的字符串（如 '20px'），应拼接或用计算属性处理
- 服务端渲染（SSR）中，确保 style 值始终为对象或数组，避免 null/undefined 导致报错
