网站 文件验证,苏州网站建设创意,服装外贸网站建设,建设工程合同甲方Class数据绑定
数据绑定的一个常见需求场景是操作CSS class列表#xff0c;因为class是attribute#xff08;属性#xff09;#xff0c;我们可以和其他attribute一样使用v-bind 将它们和动态的字符串绑定。但是#xff0c;在处理比较复杂的绑定时#xff0c;通过拼接生…Class数据绑定
数据绑定的一个常见需求场景是操作CSS class列表因为class是attribute属性我们可以和其他attribute一样使用v-bind 将它们和动态的字符串绑定。但是在处理比较复杂的绑定时通过拼接生成字符串是麻烦且容易出错的。因此Vue 专门为class 的v-bind 用法提供了特殊的功能增强。除了字符串外表达式的值也可以是数组或对象。
绑定对象Object
template
h3class数据绑定/h3
hr
div :class{active:isActive,text-danger:hasError}isActive/div
button clickexchage切换/button/template
scriptexport default {
data(){return{isActive:true,hasError:true}
},
methods:{exchage(){this.isActive!this.isActive}
}
}/script
style scoped
.active{color:red;
}
/style运行结果 未切换前 切换后
多个对象绑定
template
h3class数据绑定/h3
hr
div :classclassObjectisActive/div
button clickexchage切换/button/template
scriptexport default {
data(){return{classObject:{active:true,text-danger:true}}
},
methods:{exchage(){this.classObject.active !this.classObject.active}
}
}/script
style scoped
.active{color:rgb(132, 0, 255);font-size: large;
}
/style运行结果 切换前 切换后
数组绑定
templateh3class数据绑定/h3hrdiv :class[activeClass,errorClass]isActive/div/templatescriptexport default {data(){return{activeClass: active,errorClass:text-danger}},}/scriptstyle scoped.active{color:red;}/style运行结果 如果你想在数组中渲染某个class,你可以使用三元表达式。
templateh3class数据绑定/h3hrdiv :class[isActive ? active : ]isActive/divbutton clickexchage切换/button/templatescriptexport default {data(){return{isActive:true,}},methods:{exchage(){this.isActive!this.isActive}}}/scriptstyle scoped.active{color:red;}/style运行结果 切换 数组和对象
templateh3class数据绑定/h3hrdiv :class[{active:isActive},errorClass]isActive/divbutton clickexchage切换/button/templatescriptexport default {data(){return{isActive:true,errorClass:text-danger}},methods:{exchage(){this.isActive!this.isActive}}}/scriptstyle scoped.active{color:red;}/style运行结果 温馨提示 数组和对象的嵌套过程中只能数组嵌套对象不能反其道而行。
