vue动态class

<template>
  <div :class="dynamicClass">Hello World</div>
</template>

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

<style>
.active {
  font-weight: bold;
}

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

解释说明：

1. 模板部分：

   • 使用 :class 绑定动态类名，dynamicClass 是一个计算属性，返回一个对象。

2. 脚本部分：

   • data 中定义了两个布尔类型的变量 isActive 和 hasError。
   • computed 中定义了 dynamicClass 计算属性，根据 isActive 和 hasError 的值动态返回类名对象。如果 isActive 为 true，则添加 active 类；如果 hasError 为 true，则添加 text-error 类。

3. 样式部分：

   • 定义了两个 CSS 类：active（加粗字体）和 text-error（红色文本）。