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

在Vue中，你可以使用对象语法或数组语法来动态绑定class。如果需要结合三元运算符，可以在数组语法中使用它。

对象语法（使用对象键值对来决定类名是否存在）:

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

数组语法（可以结合三元运算符或任何JavaScript表达式）:

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

或者使用简写形式：

<div :class="[isActive && 'active', error && 'text-danger']"></div>

在组件中的实际使用例子：

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

在这个例子中，如果isActive是true，那么active类将被应用到div上；如果hasSuccess是true，那么text-success类将被应用。