vue中class的用法

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

Vue.js 中的 Class 属性

什么是 Class 属性？

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

用法：

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

结构：

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

• 键是 CSS 类名
• 值是布尔值，表示类是否应用

动态应用 CSS 类：

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

移除 CSS 类：

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

多个 CSS 类：

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

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

注意：

• class 属性中的值必须是一个对象。
• CSS 类名必须用字符串表示，用单引号或双引号引起来。
• 布尔值必须是 true 或 false。

以上就是vue中class的用法的详细内容，更多请关注小编网其它相关文章！