vue中:class（vue中class三元表达式）

Vue 中的:class 指令是用来动态绑定元素的 CSS 类名的。通过:class，我们可以根据不同的条件为元素添加或移除 CSS 类，实现样式的动态变化。本文将介绍:class 指令的用法及示例。

## 基本用法

:class 指令可以接受一个字符串、一个对象或一个数组作为参数。

### 字符串

当:class 的参数是一个字符串时，这个字符串可以是一个 CSS 类名，多个类名之间用空格分隔。当条件为真时，将为元素添加该类名，否则移除该类名。

```html

```

### 对象

当:class 的参数是一个对象时，对象的每个属性都是一个 CSS 类名，属性值表示条件是否成立。当属性值为真时，将为元素添加对应的类名，否则移除该类名。

```html

```

### 数组

当:class 的参数是一个数组时，数组的每个元素都是一个 CSS 类名。只要数组中的任意元素对应的条件成立，就会为元素添加对应的类名。

```html

```

## 示例

下面是一个使用 :class 指令的示例。

```html

```

在上述示例中，当点击 "Toggle Active" 按钮时，isActive 的值将被切换，从而动态变换元素的样式，添加或移除 active 类名。同样地，点击 "Toggle Red" 按钮时，isRed 的值将被切换，从而添加或移除 bg-red 类名。

通过 :class 指令的使用，可以轻松实现样式的动态切换，提升交互效果。