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”
}
}
}
> **温馨提示**
>
> 数组和对象嵌套过程中,只能是数组嵌套对象,不能反其道而行