Vue.js: Class 与 Style 绑定

最后更新：2026-10-20

:class 和 :style 是 Vue 最常用的两个绑定——让你能根据数据动态切换 CSS 类名和内联样式。本质上是 v-bind 的两个特殊语法，因为它们用得太多所以做了"语法糖"。

掌握 5 种写法就够覆盖 95% 的场景：对象语法、数组语法、三元、计算属性、字符串拼接。

1. 你将学到

• :class 对象语法：根据条件切换单个/多个 class
• :class 数组语法：同时应用多个 class
• 数组 + 对象混合：复杂的类名组合
• :style 对象语法：动态内联样式
• :style 数组语法：合并多个样式对象
• CSS 变量绑定（Vue 3 推荐）

2. 一个订单状态标签的样式难题

(1) 痛点：5 种状态，5 个 if 判断

Alice 需要在后台中用不同颜色显示 5 种订单状态：

<!-- ❌ 翻车版：5 个 v-if 加 class -->
<span v-if="status === 'pending'" class="badge yellow">Pending</span>
<span v-else-if="status === 'paid'" class="badge green">Paid</span>
<span v-else-if="status === 'shipped'" class="badge blue">Shipped</span>
<span v-else-if="status === 'delivered'" class="badge gray">Delivered</span>
<span v-else class="badge red">Cancelled</span>

产品经理 Charlie：

"Alice，这太丑了。下个月要加 3 个状态怎么办？你不能一直复制粘贴。我们需要一种干净的动态方案。"

(2) Vue :class 解法：1 行搞定 5 状态

(3) 收益

• HTML 减少：5 行 if-else → 1 行 :class
• 可维护：加新状态只需改 computed，模板不动
• 可读：状态类映射集中在一处，逻辑清晰

3. :class 5 种写法

(1) 字符串语法

(2) 对象语法（最常用）

(3) 数组语法

(4) 与静态 class 共存

(5) 组件上的 class

▶ 示例：5 种 :class 写法

输出：

1. 字符串        实际 class="badge"
2. 对象          实际 class="active"（hasError 为 false，error 不生效）
3. 数组          实际 class="active error"
4. 数组+对象      实际 class="active"（canEdit 为 true，无 disabled）
5. 计算属性       实际 class="active"

4. :style 5 种写法

(1) 对象语法

(2) CSS 属性名转换

Vue 自动把 JS 命名转为 CSS 命名：

(3) 数组语法（合并多个对象）

(4) 自动加前缀

Vue 3 自动给 CSS 属性加浏览器前缀（用浏览器引擎判断）：

// 写：
{ transform: 'rotate(45deg)' }

// Vue 自动加：
{
  -webkit-transform: 'rotate(45deg)',
  transform: 'rotate(45deg)'
}

(5) CSS 变量（Vue 3 推荐）

▶ 示例：5 种 :style 写法

输出：

1. 基础对象      红色文字、16px 字号
2. 多个属性      #42b883 绿底 + 20px 内边距
3. 数组合并      白字 + 绿底（themeStyles 覆盖 baseStyles）
4. CSS 变量      外观不变，只在元素上写入 --theme-color: #35495e
5. 计算属性      白字 + 深蓝底（#35495e）+ 20px 内边距

5. 完整示例：动态订单状态

▶ 示例：订单状态徽章（5 状态切换）

输出：

黄色圆角徽章显示 Pending（初始 status = 'pending'）
点 paid → 变绿显示 Paid；点 shipped → 变蓝显示 Shipped
点 delivered → 变灰显示 Delivered；点 cancelled → 变红显示 Cancelled

(1) 📊 5 个常见错误

(2) 📊 5 个性能对比

(3) 📊 class vs style 5 大区别

❓ 常见问题

📖 小节

• :class 和 :style 是 v-bind 的语法糖，用得最多所以简化
• :class 5 种写法：字符串、对象、数组、数组+对象、计算属性
• :style 5 种写法：对象、数组、数组+对象、CSS 变量、计算属性
• 静态 class 和动态 :class 自动合并
• Vue 3 自动加 CSS 浏览器前缀
• CSS 变量是 Vue 3 推荐的主题切换方案（比 style 切换高效）
• 性能：对象/计算属性 > 数组 > 字符串

📝 作业

1. 基础题（难度⭐） 用 :class 对象语法实现 3 种按钮状态：

   • primary：蓝底白字
   • success：绿底白字
   • danger：红底白字

   数据：const variant = ref('primary')

2. 进阶题（难度⭐⭐） 实现一个订单列表，每行根据订单状态显示不同颜色徽章：

   • 5 种状态（pending/paid/shipped/delivered/cancelled）
   • 用计算属性返回 class 对象
   • :style 添加状态对应的 icon 颜色

3. 挑战题（难度⭐⭐⭐） 实现一个完整的主题切换系统：

   1. 3 套主题（light/dark/high-contrast）
   2. 用 CSS 变量绑定主题色（primary/secondary/background/text）
   3. :class 切换主题类名
   4. localStorage 记住用户选择
   5. 切换主题不刷新页面（响应式自动更新）

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们