Vue 中正确使用 class 绑定与 style 绑定的方式

作者：袖梨 2026-07-21

在 Vue 中，:class 用于动态绑定 CSS 类名（需提前在样式中定义），而 :style 才适用于直接内联样式对象；混淆二者会导致样式不生效。

在 vue 中，`:class` 用于动态绑定 css 类名（需提前在样式中定义），而 `:style` 才适用于直接内联样式对象；混淆二者会导致样式不生效。

在 Vue 模板中，动态控制元素样式有两种主流方式：类名绑定（v-bind:class 或 :class） 和 内联样式绑定（v-bind:style 或 :style）。二者语义和用法截然不同，不可混用。

✅ 正确使用 :class（类绑定）

:class 接收的是字符串、对象或数组，其值必须对应已定义的 CSS 类名。它本身不生成样式，只负责切换类的存在状态。

<template>  <p :class="getStyle">Hello World</p></template><script>export default {  computed: {    getStyle() {      return 'highlight'; // 返回类名字符串（非样式值！）    }  }}</script><style>.highlight {  background-color: #8898ff; /* 注意：#8898 是无效颜色，应为 #8898ff 或 #889 */  color: white;  padding: 4px 8px;}</style>

⚠️ 注意事项：

#8898 是非法十六进制颜色（长度必须为 3 或 6 位），应修正为 #889（缩写）或 #8899ff 等有效值；
getStyle 不应操作 DOM（如 document.body.style.background = ...），这违背响应式原则，且无法作用于 <p> 元素；
类名需在 <style> 中明确定义，Vue 仅负责添加/移除该类。

✅ 正确使用 :style（内联样式绑定）

当需要动态生成样式值时，应使用 :style，它接收一个样式对象（key-value），Vue 会自动转换为内联 style 属性：

立即学习“前端免费学习笔记（深入）”；

<template>  <p :style="getStyle">Hello World</p></template><script>export default {  computed: {    getStyle() {      return {        backgroundColor: '#8899ff', // ✅ 合法颜色值        color: 'white',        padding: '4px 8px'      };    }  }}</script>

✅ 优势：完全动态、无需预定义类；支持驼峰式属性名（如 backgroundColor）或短横线字符串（如 'background-color'）。

? 对比总结

特性	:class	:style
输入类型	字符串 / 对象 / 数组（类名）	样式对象（键值对）
样式来源	外部 <style> 或 CSS 文件	内联 style 属性
响应式更新	✅（类增删）	✅（样式重写）
性能建议	推荐用于复用样式、主题切换	推荐用于高度动态、计算型样式