Vue 类与样式绑定

封面图 • 2026-03-27 • Vue

在 Vue 中，**类与样式绑定**是用于动态地控制元素的类名和样式属性的一种方式。Vue 提供了多种方法来实现这一点，包括使用 `class` 和 `style` 绑定。

---

## 一、类绑定（`class` 绑定）

### 1. 基本用法：绑定一个类

```vue
<template>
  <div :class="className">这是一个元素</div>
</template>

### 2. 动态绑定多个类

可以使用对象语法或数组语法来绑定多个类：

#### ✅ 对象语法（推荐）：

```vue
<template>
  <div :class="{ active: isActive, 'text-red': isRed }">这是一个元素</div>
</template>

#### ✅ 数组语法（适用于多个类名）：

```vue
<template>
  <div :class="[baseClass, { active: isActive }]">这是一个元素</div>
</template>

---

## 二、样式绑定（`style` 绑定）

### 1. 基本用法：绑定内联样式

```vue
<template>
  <div :style="styleObject">这是一个元素</div>
</template>

### 2. 使用数组绑定多个样式对象

```vue
<template>
  <div :style="[baseStyle, { color: 'blue' }]">这是一个元素</div>
</template>

---

## 三、结合条件判断

你可以将类或样式绑定与条件语句结合使用：

```vue
<template>
  <div 
    :class="{
      active: isActive,
      'text-green': !isActive
    }"
    :style="{
      backgroundColor: isActive ? 'lightgreen' : 'lightgray'
    }"
  >
    这是一个元素
  </div>
</template>

---

## 四、总结

| 方法 | 描述 |
|------|------|
| `:class` | 动态绑定类名 |
| `:style` | 动态绑定内联样式 |
| 对象语法 | `{ className: condition }` |
| 数组语法 | `[class1, class2]` 或 `[object1, object2]` |

---

如果你有具体场景或想了解如何结合 Vue 的响应式数据进行操作，欢迎继续提问！