vue2动态class

Vue2中可以使用动态class绑定来根据条件动态添加或删除类。你可以通过在模板中使用v-bind:class指令来实现。

以下是一个示例：

<template>
  <div :class="{ active: isActive, 'text-red': isError }">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  }
};
</script>

在上面的示例中，`isActive`和`isError`是组件的data属性，它们控制了是否应用相应的类。当`isActive`为`true`时，会添加名为"active"的类；当`isError`为`true`时，会添加名为"text-red"的类。

你也可以在对象中使用动态类名的表达式，例如：

<template>
  <div :class="classObject">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-red': false
      }
    };
  }
};
</script>

上面的示例中，使用了一个名为`classObject`的data属性，它是一个对象，其中的键表示类名，值表示是否应用该类。在这个例子中，"active"类会始终被应用，而"text-red"类不会被应用。

你还可以通过计算属性来动态生成类名。例如：

<template>
  <div :class="computedClasses">
    <!-- 内容 -->
  </div>
</template>

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

在上面的示例中，`computedClasses`是一个计算属性，根据`isActive`和`isError`的值动态生成类名对象。

这些是Vue2中动态class绑定的一些常见用法，你可以根据具体需求来选择适合你的方法。