如何在Vue中有条件地添加类？

在Vue中有条件地添加类可以通过以下几种方式实现：

使用对象语法：可以通过绑定一个对象来动态地添加类。在数据绑定中，根据条件设置对象中的属性为true或false，属性名作为类名，属性值为true时表示添加该类，为false时表示移除该类。例如：

<template>
  <div :class="{ 'highlight': isHighlighted, 'bold': isBold }">
    Content
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: true,
      isBold: false
    }
  }
}
</script>

在上述代码中，当isHighlighted为true时，会添加highlight类；当isBold为true时，会添加bold类。

使用数组语法：可以通过绑定一个数组来根据条件添加类。在数组中可以使用三元表达式来判断是否添加某个类。例如：

<template>
  <div :class="['highlight', isBold ? 'bold' : '']">
    Content
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBold: false
    }
  }
}
</script>

在上述代码中，当isBold为true时，会添加bold类，否则不添加。

使用计算属性：可以通过计算属性来动态地生成类名。根据条件返回对应的类名，然后绑定到元素上。例如：

<template>
  <div :class="computedClasses">
    Content
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: true,
      isBold: false
    }
  },
  computed: {
    computedClasses() {
      let classes = ['highlight'];
      if (this.isBold) {
        classes.push('bold');
      }
      return classes;
    }
  }
}
</script>

在上述代码中，根据isBold的值生成对应的类名数组，然后绑定到元素上。

以上是三种常用的在Vue中有条件地添加类的方式，具体使用哪种方式取决于实际情况和个人偏好。