Vue动态绑定class和style的核心是让样式与数据状态同步：:class控制预定义类名开关，接收字符串/对象/数组；:style控制内联样式值，接收样式对象或数组，需注意单位处理和响应式声明。
Vue 中动态绑定 class 和 style 的核心，是让样式变化与数据状态保持同步——不是手动改 DOM，而是声明“什么状态对应什么样式”。关键在于分清用途：:class 控制类名开关，:style 控制内联样式值。用错场景（比如试图用 :class 设置 color）会导致样式不生效。
:class 用于切换预定义 CSS 类
它只接收字符串、对象或数组，最终生成的是 HTML 的 class 属性值，不解析 CSS 规则。
-
对象语法最常用：适合按布尔条件启用/禁用多个类，例如
:class="{ 'btn-active': isPressed, 'btn-disabled': isLocked }" -
可与静态 class 共存：如
class="base-btn" :class="{ 'btn-primary': type === 'primary' }"，两者会合并 -
数组语法更灵活：支持混合字符串、对象和计算属性，例如
:class="[baseClass, { 'hovered': isHover }, themeClass]" - 计算属性返回对象或数组：把复杂逻辑封装起来，提升模板可读性，也便于复用
:style 用于设置内联样式值
它接收一个样式对象（或对象数组），键是 CSS 属性（支持驼峰或短横线写法），值是具体数值或单位字符串。
-
直接写对象最直观：如
:style="{ backgroundColor: bgColor, fontSize: size + 'px' }" -
绑定样式对象变量更清晰：尤其当样式较多时，避免模板臃肿，例如
:style="buttonStyle"，其中buttonStyle是 reactive 或 computed 的对象 -
支持数组语法叠加多个样式对象：可用于分离基础样式与状态样式，例如
:style="[baseStyle, isDanger ? dangerStyle : {}]" -
自动添加浏览器前缀：如
transform、userSelect等属性，Vue 会根据目标浏览器自动补全
组件内设计建议
在单文件组件中，应兼顾可维护性与响应式语义：
立即学习“前端免费学习笔记（深入）”；
- 优先用 :class + CSS 类：利于复用、支持 scoped、便于主题切换和 CSS 工程化
- 仅当样式值需实时计算时用 :style：比如根据数据比例算 width、根据用户偏好设 color、动画中的 transform 值
-
避免在 :class 中尝试写样式声明：例如
:class="{ 'color: red': true }是无效的，class 属性不识别 CSS 规则 -
注意单位处理：:style 中数值需自行拼接单位（如
px、%），而 class 中由 CSS 定义
常见误区提醒
新手容易混淆两类绑定的本质：
- 把颜色值直接塞进 :class —— 错误示例：
:class="'background-color: ' + bg"；正确做法是定义.bg-blue { background-color: #3498db; }，再用:class="{ 'bg-blue': isBlue }" - 在 :style 中传入字符串而非对象 —— 错误示例：
:style="`color: ${textColor}`"；正确写法是:style="{ color: textColor }" - 忽略响应式更新边界：若样式对象是普通对象而非 reactive 或 computed，后续修改不会触发视图更新
