vue中动态配置class

在Vue中，可以通过动态配置class来实现根据条件添加或移除CSS类。Vue提供了多种方式来实现这个目的。

1. 对象语法：
可以使用对象语法来动态绑定class。在模板中，可以将一个对象作为class的值，对象的属性名表示CSS类名，属性值表示是否添加该类名。例如：

<div :class="{ 'active': isActive, 'error': hasError }"></div>

在上面的例子中，`isActive`和`hasError`是Vue实例中的数据属性，根据它们的值来决定是否添加对应的CSS类。

2. 数组语法：
除了对象语法，还可以使用数组语法来动态绑定class。在模板中，可以将一个数组作为class的值，数组中的每个元素表示一个CSS类名。例如：

<div :class="[activeClass, errorClass]"></div>

在上面的例子中，`activeClass`和`errorClass`是Vue实例中的数据属性，它们的值会被添加为CSS类名。

3. 绑定计算属性：
还可以通过计算属性来动态计算class。在Vue实例中定义一个计算属性，根据条件返回对应的CSS类名。例如：

<div :class="computedClasses"></div>

data() {
  return {
    isActive: true,
    hasError: false
  }
},
computed: {
  computedClasses() {
    return {
      active: this.isActive,
      error: this.hasError
    }
  }
}

在上面的例子中，根据`isActive`和`hasError`的值，计算属性`computedClasses`会返回一个对象，对象的属性名表示CSS类名。