vue动态绑定class的几种方式

在Vue中，可以使用以下几种方式动态绑定class：

1. 对象语法：可以传给 v-bind:class 一个对象，动态地切换 class。

<div v-bind:class="{ active: isActive, 'text-success': hasSuccess }"></div>

data() {
  return {
    isActive: true,
    hasSuccess: false
  }
}

2. 数组语法：可以传给 v-bind:class 一个数组，将多个 class 应用到同一个元素上。

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

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

3. 混合使用对象和数组语法：可以把数组和对象结合使用，这是非常灵活的。

<div v-bind:class="[isActive ? 'active' : '', errorClass]"></div>

data() {
  return {
    isActive: true,
    errorClass: 'text-danger'
  }
}

4. 使用计算属性：可以使用计算属性返回 class 对象或数组。

<div v-bind:class="classObject"></div>

data() {
  return {
    isActive: true,
    hasSuccess: false
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive,
      'text-success': this.hasSuccess
    }
  }
}

以上是Vue动态绑定class的几种常见方式。