Vue 框架中 Class 绑定的三种形式

在Vue框架中，Class绑定可以通过以下三种方式实现：

1. 对象绑定：使用对象字面量的方式绑定多个class。
2. 数组绑定：使用数组的方式绑定多个class。
3. 三元运算符：使用三元运算符根据条件动态绑定class。

以下是每种方式的示例代码：

1. 对象绑定：

<template>
  <div :class="{ active: isActive, 'text-success': hasSuccess }"></div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: true,
      hasSuccess: false
    }
  }
}
</script>

2. 数组绑定：

<template>
  <div :class="[isActive ? 'active' : '', error ? 'text-danger' : '']"></div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: true,
      error: false
    }
  }
}
</script>

3. 三元运算符绑定：

<template>
  <div :class="isActive ? 'active' : 'inactive'"></div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

在这些例子中，:class是Vue中绑定class的语法，active和text-success是静态的class名称，而isActive和hasSuccess是组件的数据属性，用于动态地决定class是否应用。