核心只有一句：不要手动改 class/style，把要的效果写成一个值，绑上去。 五个现场：对象语法、数组语法、style 对象/数组合并、CSS 变量、组件上的 class 落到哪（含多根组件的开发版警告）。 每个按钮只做一件事，结论打进最下面的迷你控制台。
| 写法 | 注意点 |
|---|---|
:class="{ active: isActive }" | 键是类名、值是布尔；类名带连字符或空格是字符串键，必须加引号，不加引号会被当成 JS 表达式报编译错 |
:class="[base, isActive ? 'ok' : 'bad']" | 数组放「确定生效的类名」，三元/对象也能塞进数组；数组里的假值（false/null/undefined）会被自动忽略 |
:class="computedStr" | 返回字符串（如 'btn btn-lg'）也接受；但拼字符串容易写出空格 bug，能用对象就别拼串 |
:style="{ width: w + '%' }" | CSS 属性名在 JS 里写小驼峰（backgroundColor）；kebab-case 加引号也支持。:style="'color:red'" 字符串写法能用但不好维护 |
:style="[base, theme]" | 数组按顺序合并，后面的对象优先级更高，同名属性会覆盖前面的 |
:style="{ '--c': color }" | CSS 变量必须用 style 绑（不能用 :class），值走 setProperty；这是给第三方 CSS / 主题传值的正路 |
SVG 上的 :class | 模板里绑 class 和 HTML 元素一模一样（Vue 内部对 SVG 用 setAttribute）；但 JS 里 svgEl.className 是 SVGAnimatedString 对象，赋字符串无效，要手动改只能用 classList / setAttribute('class', …) |
<my-comp :class="..."> | 单根组件自动继承到根元素；多根（fragment）组件不会继承，开发版直接警告，要自己 v-bind="$attrs" 或 defineOptions({ inheritAttrs: false }) |