vue动态添加class

在Vue中动态添加class可以通过以下几种方式实现：

1. 使用对象语法：
可以通过在data中定义一个变量，根据变量的值来动态决定是否添加某个class。例如：

<template>
  <div :class="{ active: isActive }">Dynamic Class</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

上述代码中，isActive的值为true时，会添加active类。

2. 使用数组语法：
可以通过在data中定义一个数组，根据数组中元素的值来动态添加多个class。例如：

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

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'error'
    }
  }
}
</script>

上述代码中，activeClass和errorClass分别对应不同的class，当它们的值为非空字符串时，会添加对应的class。

3. 使用计算属性：
可以通过计算属性根据一些条件来动态返回需要添加的class。例如：

<template>
  <div :class="computedClass">Dynamic Class</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    }
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive,
        error: this.isError
      }
    }
  }
}
</script>

上述代码中，computedClass是一个计算属性，根据isActive和isError的值来返回一个对象，该对象的属性决定是否添加对应的class。

这些都是Vue中动态添加class的常见方式，你可以根据具体的需求选择合适的方法。