Vue动态设置class的方式

Vue.js 中动态设置 class 有多种方式，主要包括以下几种：

1. 对象语法： 使用 v-bind:class 或简写为 :class 绑定一个对象到元素的 class
   属性上。该对象的键是类名，值是一个条件表达式，如果表达式的值为真，则添加对应的类名。

Vue代码：

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

// 在组件中定义数据或计算属性
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  },
  computed: {
    customClasses() {
      return {
        'active-class': this.isActiveCondition,
        'error-class': this.hasErrorCondition
      };
    }
  }
}

2. 数组语法： 可以将多个类名或类名对象放在数组中，这样可以同时应用多个类名。

Vue代码：

<div :class="['static-class', dynamicClassObject, { special: isSpecial }]"></div>

3. 三元运算符（条件判断）： 当只需要根据某个条件简单地切换两个类名时，可以使用三目运算符。

Vue代码：

<div :class="status === 'success' ? 'success-state' : 'error-state'"></div>

4. 字符串绑定： 当类名需要基于变量拼接时，可以结合模板字符串来动态生成。

Vue代码：

<div :class="`${baseClass} ${dynamicClass}`"></div>

5. 多条件联合判断： 如果有多个条件决定多个类名的添加和移除，可以组合以上方式使用。

Vue代码：

<div :class="[commonClass, {'class-a': conditionA}, {'class-b': conditionB}]"></div>

通过以上这些方式，Vue 能够实现类名根据组件内部状态的变化而动态地添加、删除，从而控制元素样式变化。