vue动态绑定多个class以及带上三元运算或其他条件

当我们需要在Vue组件中绑定多个class时，可以使用v-bind:class指令，它可以动态地绑定一个或多个class到元素上。除此之外，还可以结合三元表达式或其他条件来动态地控制class的绑定。

基本语法

<template>
  <div v-bind:class="{ class1: expression1, class2: expression2 }"></div>
</template>

v-bind:class指令可以接受一个对象作为参数，对象的属性是class名称，属性值是布尔值或计算属性的名称。当属性值为真时，对应的class名称会被绑定到元素上。

如果需要动态控制多个class的绑定，则可以使用多个对象同时传递给v-bind:class指令。

<template>
  <div v-bind:class="{ class1: expression1 }" :class="[class2, class3]"></div>
</template>

示例一：三元表达式控制class的绑定

<template>
  <div class="card" :class="[isActive ? 'active' : '', isDisabled ? 'disabled' : '']">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isDisabled: false,
      title: 'Vue class绑定示例',
      description: '使用三元表达式动态控制多个class的绑定',
    };
  },
};
</script>

<style>
.active {
  background-color: green;
}
.disabled {
  opacity: 0.5;
}
</style>

在上面的示例中，我们定义了一个类为card的div元素，并结合v-bind:class指令实现了动态class的绑定。我们使用isActive和isDisabled两个布尔值来控制类绑定的条件，并使用三元表达式结合大括号把class名称拼接成一个字符串，最终传递给v-bind:class指令。

示例二：计算属性控制class的绑定

<template>
  <div class="list" :class="getClassNames">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: 'item A', completed: true },
        { id: 2, text: 'item B', completed: false},
        { id: 3, text: 'item C', completed: true },
        { id: 4, text: 'item D', completed: false},
      ],
    };
  },
  computed: {
    getClassNames() {
      return {
        completed: this.list.every(item => item.completed),
        incomplete: this.list.some(item => !item.completed),
      };
    },
  },
};
</script>

<style>
.completed {
  color: green;
  text-decoration: line-through;
}
.incomplete {
  color: red;
}
</style>

在上面的示例中，我们定义了一个包含多个元素的列表，并动态地绑定它们的class。我们使用计算属性getClassNames来实现动态class的绑定。在计算属性中，我们使用every和some方法分别判断列表中是否每个元素都已完成或还有未完成的元素，并根据结果返回不同的class名称。

通过上述两个示例可以看出，Vue动态绑定多个class并结合三元表达式或其他条件来控制绑定的条件是非常方便且易于实现的。这种技术为组件的开发提供了更多灵活性和创造性。