《Vue 3基础入门》课件 第五章 样式绑定.pptx

第5章样式绑定

Contents目录绑定HTML样式01绑定内联样式02实现列表行的奇偶行不同样式03

01绑定HTML样式PART

对象控制样式在Vue3中，除了可以使用字符串为属性赋值之外，也可以使用对象或数组为属性赋值可以通过传给v-bind:class一个对象，来动态地切换class属性值当返回的isActive的值为true时，样式被成功渲染在控制台中输入vm.$data.isActive=false后，样式将不会被渲染在页面divid=appdivv-bind:class={active:isActive}/div/div?scriptconstapp={data(){return{isActive:true};}};constvm=Vue.createApp(app).mount(#app);/script

对象控制样式在Vue3中，v-bind:class指令也可以与普通class属性共存将模板和data代码进行修改将代码再次运行后，可以明显发现普通的class属性和v-bind:class指令实现了共存divclass=staticv-bind:class={active:isActive,text-danger:hasError}/divdata(){return{isActive:true,hasError:false}}

对象控制样式如果需绑定的数据对象比较复杂时，可以选择在数据属性中单独定义一个对象进行绑定通过返回对象的计算属性来进行绑定也是可行的divid=appdivv-bind:class=class0bject/div/divscriptconstvm=Vue.createApp(()data(){return{class0bject:{active:true,text-danger:false}}}}).mount(#app);/scriptdivv-bind:class=class0bject/divscriptconstvm=Vue.createApp({data(){return{isActive:true,error:null}},computed:{class0bject(){return{active:this.isActive!this.error,text-danger:this.errorthis.error.type===fatal}}}}).mount(#app);/script

数组控制样式通过将数组传给v-bind:class，这样会在元素上应用一个样式列表若想根据条件来切换在列表中的样式时，可以使用三元表达式来切换简化的对象语法也是可以使用的style.active{width:100px;height:100px;background:green;}.text-danger{background:red;}/style?divv-bind:class=[activeClass,errorClass]/divscriptconstvm=Vue.createApp({data(){return{activeClass:active,errorClass:text-danger}}}).mount(#app);/scriptdivv-bind:class=[isActive?activeClass:,errorClass]/divscriptconstvm=Vue.createApp({data(){return{activeClass:active,errorClass:text-danger,isActive:true}}}).mount(#app);/scriptdivv-bind:class=[{active:isActive},errorClass]/div

组件中的应用在一个自定义单根元素组件上使用class属性时，会将样式添加到组