V-bind 动态绑定 Class 的案例集合

在Vue.js中，我们可以使用v-bind指令来动态绑定class。这里有几个例子展示如何使用v-bind来实现动态绑定class：

1. 对象语法：

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

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

2. 数组语法：

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

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

3. 绑定到对象的计算属性：

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

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

4. 使用三元表达式：

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

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

这些例子展示了如何在Vue中使用v-bind:class来根据组件的数据或计算属性动态绑定class。