vue3 Class绑定
一、 Class绑定
1、 说明
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表因为 class
是 attribute,我们可以和其他atribute 一样使用 v-bind
将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue
专门为 class
的 v-bind
用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组
2、代码展示
<template>
<!--class绑定-->>
<p :class="{'active':isActive,'text-danger':hasError}"> Class样式绑定1</p>
<!-- class引用关系绑定 -->
<p :class="classobject">Class样式绑定2</p>
<!--数组绑定-->
<p :class="[activeClass]">Class样式绑定3</p>
</template>
<script>
export default {
data(){
return{
isActive:true,
hasError:true,
classObject:f
'active':true,
'text-danger':true
},
activeClass:["active1","active2"]
}
}
</script>
3、有条件的渲染某个class
如果你也想在数组中有条件的渲染某个class,你可以使用三元表达式bool?expre1:expre2
<p :class="[isTrue?'active1':'active2']"> 样式</p>
4、数组和对象的嵌套使用
<template>
<p :class="[{'active':isActive},errorClass]"></p>
</template>
温馨提示
素组和对象嵌套中,只能说数组嵌套对象,不能反其道而行