Vue中 class 和 style 属性的区别对比
Vue 中 class 与 style 属性的核心区别
| 维度 | class | style |
|---|---|---|
| 作用 | 动态切换 CSS 类名，复用预定义样式 | 直接绑定内联样式，动态修改元素的 style 属性 |
| 绑定语法 | :class（v-bind:class 的简写） | :style（v-bind:style 的简写） |
| 支持的数据类型 | 字符串、对象、数组 | 对象、数组（字符串仅用于简单静态样式） |
| 典型写法 | { active: isActive, 'text-bold': isBold }[class1, class2] | { color: 'red', fontSize: '13px' }[s1, s2] |
| 与普通属性共存 | 可与普通 class 并存，不会覆盖 | 可与普通 style 并存，不会覆盖 |
| 适用场景 | 需要复用 CSS 类、主题切换、状态类（如 active、error） | 样式值由数据实时计算、随机颜色、动态尺寸等 |
| 性能建议 | 推荐使用类选择器而非标签选择器，避免 scoped CSS 产生过慢的属性选择器组合 | 内联样式优先级高，适合少量动态属性；大量样式仍建议写在 CSS 中 |
一句话总结
- 用
:class做“状态标签”，把元素打上/摘下预定义的 CSS 类； - 用
:style做“实时化妆”，直接给元素注入动态计算出的内联样式。