vue 动态css

<template>
  <div :class="dynamicClass">
    这是一个使用动态 CSS 的 div。
  </div>
</template>

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

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

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

解释说明：

1. 模板部分 (<template>):

   • 使用了 :class 绑定来动态设置类名。dynamicClass 是一个计算属性，它会根据 data 中的值返回不同的类名。

2. 脚本部分 (<script>):

   • data 函数返回了一个对象，包含两个布尔值：isActive 和 hasError。
   • computed 中定义了 dynamicClass 计算属性，它会根据 isActive 和 hasError 的值返回相应的类名对象。如果 isActive 为 true，则添加 active 类；如果 hasError 为 true，则添加 text-error 类。

3. 样式部分 (<style>):

   • 定义了两个 CSS 类：active 和 text-error。active 类设置了背景颜色和文本颜色，而 text-error 类仅设置了文本颜色为红色。

通过这种方式，你可以根据组件的状态动态地应用不同的样式。