vue class 判断

Vue中可以使用`v-bind:class`指令来动态绑定class。可以通过以下方式进行判断：

1. 使用计算属性

可以在Vue实例中定义一个计算属性，根据条件返回不同的class名称，然后在模板中使用`v-bind:class`指令绑定计算属性。

<template>
  <div v-bind:class="classObj"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    classObj() {
      return {
        active: this.isActive,
        'text-danger': !this.isActive
      }
    }
  }
}
</script>

2. 直接在模板中判断

可以使用三元表达式，在模板中直接判断条件并返回不同的class名称。

<template>
  <div class="static-class" v-bind:class="isActive ? 'active' : 'inactive'"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

3. 使用对象语法

可以使用对象语法，根据条件返回一个对象，对象中的属性名就是class名称，属性值为true时表示应用该class，为false时表示不应用该class。

<template>
  <div v-bind:class="{ active: isActive, 'text-danger': !isActive }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>