vue3 :class
时间: 2023-11-04 08:57:17 浏览: 57
在 Vue 3 中,`:class` 是用来动态绑定 CSS 类的指令。它可以根据表达式的值来添加或移除对应的 CSS 类。
具体用法如下:
1. 绑定单个 CSS 类:
```html
<div :class="isActive ? 'active' : ''">...</div>
```
上面的例子中,当 `isActive` 为真时,会给 `<div>` 元素添加 `active` 类;当 `isActive` 为假时,移除 `active` 类。
2. 绑定多个 CSS 类:
```html
<div :class="{ active: isActive, 'text-bold': isBold }">...</div>
```
上面的例子中,当 `isActive` 为真时,会给 `<div>` 元素添加 `active` 类;当 `isBold` 为真时,会给 `<div>` 元素添加 `text-bold` 类。
3. 绑定数组形式的 CSS 类:
```html
<div :class="[isActive ? 'active' : '', isBold ? 'text-bold' : '']">...</div>
```
上面的例子中,根据条件动态生成一个数组,然后将数组作为参数传递给 `:class` 指令。
4. 动态绑定 CSS 类对象:
```html
<div :class="classObject">...</div>
```
在 Vue 实例中定义一个计算属性 `classObject`,返回一个包含类名和布尔值的对象。根据对象的键值对来决定是否添加或移除对应的 CSS 类。