Class绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

绑定对象

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

多个对象绑定

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

绑定数组

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

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

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

数组和对象

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

温馨提示

isActive:true,
errorClass:“text-danger”
}
}
}

> **温馨提示**
>
> 数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道而行