vue 动态添加class

作者：断晴星魂发布日期:2026-03-24 浏览:111

<template>
  <div :class="[baseClass, {'active': isActive}]">
    我是一个可以动态添加 class 的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseClass: 'my-class',
      isActive: true
    };
  }
};
</script>

<style>
.my-class {
  color: blue;
}

.active {
  background-color: yellow;
}
</style>

解释说明：

:class 是 Vue 中用于动态绑定 class 的语法糖。
[baseClass, {'active': isActive}] 表示 baseClass 总是会被添加，而 active 类只有在 isActive 为 true 时才会被添加。
data 函数返回一个对象，包含两个属性：baseClass 和 isActive。baseClass 是一个静态类名，isActive 是一个布尔值，控制是否添加 active 类。
在样式部分，.my-class 定义了文本颜色为蓝色，.active 定义了背景颜色为黄色。

这样就可以根据 isActive 的值动态地给元素添加或移除 active 类。

上一篇：vue连接websocket

下一篇：vue数组删除指定元素