vue怎么动态绑定class

如何动态绑定 Vue 中的 class

简介
在 Vue 中，动态绑定 class 可以动态添加或删除元素的 CSS 类名，从而根据特定条件调整元素的样式。

语法

:class="[dynamicClassExpression]"

其中：

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

使用
有两种主要方式在 Vue 中动态绑定 class：

1. 对象语法
使用对象语法，可以创建包含类名的键值对象。当条件为真时，将添加相应的类名。

:class="{ 'class-name-1': condition1, 'class-name-2': condition2 }"

2. 数组语法
使用数组语法，可以返回一个包含类名的数组。

:class="[ 'class-name-1', 'class-name-2' ]"

示例
下面的示例使用对象语法动态绑定 class，当 isHovered 为真时，添加 hovered 类名：

<div :class="{ hovered: isHovered }"></div>

注意