vue中class的用法

百变鹏仔 3个月前 (09-25) #VUE

文章标签 vue

vue.js 中的 class 属性允许动态添加或移除 css 类，其值是一个对象，键是 css 类名，值是布尔值。当值对应键为 true 时，相应的 css 类被应用到元素上；当值对应键为 false 时，相应的 css 类从元素中移除。多个 css 类可以通过空格指定。

Vue.js 中的 Class 属性

什么是 Class 属性？

Vue.js 中的 class 属性允许动态地添加或删除 HTML 元素上的 CSS 类。

用法：

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

<div :class="{ active: isActive, disabled: isDisabled }"></div>

结构：

class 属性的值是一个对象，其中：

动态应用 CSS 类：

如果对象的键对应的值（isActive 和 isDisabled）为 true，则相应的 CSS 类（active 和 disabled）将被应用到元素上。

移除 CSS 类：

当对象的键对应的值为 false 时，相应的 CSS 类将从元素中移除。

多个 CSS 类：

可以通过使用空格将多个 CSS 类指定为对象键：

<div :class="{ 'class-1': condition1, 'class-2': condition2 }"></div>

注意：

文章推荐