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-danger': this.hasError
      };
    }
  }
};
</script>

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

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

解释说明：

• :class 绑定：通过 :class 指令可以动态地绑定一个对象或数组到元素的 class 属性上。
• data 中定义了两个布尔值 isActive 和 hasError，用于控制类名的添加。
• computed 中定义了 dynamicClass 计算属性，返回一个对象。这个对象的键是类名，值是布尔表达式。如果布尔表达式的值为 true，则对应的类名会被添加到元素上。
• 样式部分定义了 .active 和 .text-danger 类，分别用于加粗字体和设置红色文本颜色。

如果你需要更复杂的动态类绑定，可以根据实际需求调整 data 和 computed 部分的内容。