vue3 动态class

作者：罚尘封魔发布日期:2026-07-31 浏览:61

<template>
  <div :class="dynamicClass">This div has a dynamic class.</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      error: false
    };
  },
  computed: {
    dynamicClass() {
      return {
        active: this.isActive,
        'text-danger': this.error
      };
    }
  }
};
</script>

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

.text-danger {
  color: red;
}
</style>

解释说明：

:class 是 Vue 的语法糖，用于动态绑定 class。
dynamicClass 是一个计算属性，根据 isActive 和 error 的值返回不同的类名。
当 isActive 为 true 时，active 类会被添加到元素上；当 error 为 true 时，text-danger 类会被添加到元素上。
在样式中定义了 active 和 text-danger 类的样式。

上一篇：vue getcurrentinstance

下一篇：vite + vue + ts