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

第5章样式绑定Contents目录绑定HTML样式01绑定内联样式02实现列表行的奇偶行不同样式0301绑定HTML样式PART对象控制样式在Vue3中，除了可以使用字符串为属性赋值之外，也可以使用对象或数组为属性赋值可以通过传给v-bind:class一个对象，来动态地切换class属性值当返回的isActive的值为true时，样式被成功渲染在控制台中输入vm.$data.isActive=false后，样式将不会被渲染在页面<divid='app'><divv-bind:class="{active:isActive}"></div></div>

<script>constapp={data(){return{isActive:true};}};constvm=Vue.createApp(app).mount('#app');</script>对象控制样式在Vue3中，v-bind:class指令也可以与普通class属性共存将模板和data代码进行修改将代码再次运行后，可以明显发现普通的class属性和v-bind:class指令实现了共存<divclass="static"v-bind:class="{active:isActive,'text-danger':hasError}"></div>data(){return{isActive:true,hasError:false}}对象控制样式如果需绑定的数据对象比较复杂时，可以选择在数据属性中单独定义一个对象进行绑定通过返回对象的计算属性来进行绑定也是可行的<divid="app"><divv-bind:class="class0bject"></div></div><script>constvm=Vue.createApp(()data(){return{class0bject:{active:true,'text-danger':false}}}}).mount('#app');</script><divv-bind:class="class0bject"></div><script>constvm=Vue.createApp({data(){return{isActive:true,error:null}},computed:{class0bject(){return{active:this.isActive&&!this.error,'text-danger':this.error&&this.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]"></div><script>constvm=Vue.createApp({data(){return{activeClass:'active',errorClass:'text-danger'}}}).mount('#app');</script><divv-bind:class="[isActive?activeClass:'',errorClass]"></div><script>constvm=Vue.createApp({data(){return{activeClass:'active',errorClass:'text-danger',isActive:true}}}).mount('#app');</script><divv-bind:class="[{active:isActive},errorClass]"></div>组件中的应用在一个自定义单根元素组件上使用class属性时，会将样式添加到组件的根元素上，而不会进行覆盖对于带数据绑定的class属性同样适用组件中存在多个根元素时，需要通过使用$attrs组件属性去指定那个根元素去接收Vponent('my-component',{template:'<pclass="foobar">Hi</p>'})<my-componentclass="bazboo"></my-component><pclass="foobarbazboo">Hi</p><my-componentv-bind:class="{active:isActive}"></my-component><pclass="foobaractive">Hi</p><divid="app"><my-componentclass="baz"></my-component></div><script>constapp=Vue.createApp({})ponent('my-component',{template:'<p:class="$attrs.class">Hi!</p><span>Thisisachildcomponent</span>'})</script>02绑定内联样式PART对象描述样式v-bind:style可以给元素绑定内联样式，它实际上是一个JS对象通过在数据属性中定义一个样式对象，进而使用v-bind:style进行绑定该对象也是可行的<divid="app"><divv-bind:style="{color:activeColor,fontSize:fontSize+'px’}"></div></div><script>constvm=Vue.createApp({data(){return{activeColor:'red',fontSize:30}}}).mount('#app');</script><divid="app"><divv-bind:style="styleObject"></div></div><script>constvm=Vue.createApp({data(){return{styleObject:{color:'red',fontSize:'13px'}}}}).mount('#app');</script>数组描述样式v-bind:style的数组语法可以将多个样式对象应用到同一个元素上v-bind:style接一个样式对象数组[baseStyle,moreStyle]，可以将数组中的每一个样式对象的样式渲染出来。自定义的两个样式对象<divid="app"><divv-bind:style="[baseStyles,moreStyles]"></div></div><script>constvm=Vue.createApp({data(){return{baseStyles:{border:'solid2pxblack'},moreStyles:{width:'100px',height:'100px',background:'orange',}}}}).mount('#app');</script>其它当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，Vue3会自动侦测并添加相应的前缀可以为绑定的style属性赋一个包含多个带前缀的数组，这样只会渲染数组中最后一个被浏览器支持的值若浏览器支持不带浏览器前缀的flexbox，则会只渲染display:flextransform:rotate(7deg);-ms-transform:rotate(7deg);//IE9-moz-transform:rotate(7deg);//Firefox-webkit-transform:rotate(7deg);//Safari和Chrome-o-transform:rotate(7deg);//Opera<div:style=“{display:['-webkit-box','-ms-flexbox','flex']}"></div>03实例：实现列表行的奇偶行不同样式PART实例先定义针对偶数行的样式规则表格的数据采用v-for指令循环输出，v-for指令可携带一个参数，根据这个索引参数栏判断奇偶行.even{background-color:#cdedcd;}<divid="app"v-cloak><table><tr><th>序号</th>

<th>课程</th><th>教师</th><th>课时</th><th>操作</th></tr><trv-for="(book,index)inbooks":key="book.id":class="{even:(index+1)%2===0}"><td>{{book.id}}</td><td>{{book.title}}</td><td>{{book.teacher}}</td><td>{{book.classHour}}</td><td><button@click="deleteItem(index)">删除</button></td></tr></table></div>实例books数组实际上是一个对象数组，其中每个对象都包含了一本书籍的详细信息<script>constvm=Vue.createApp({data(){return{books:[{

id:1,

title:'高等数学',

teacher:'王老师',

classHour:32},{id:2,

title:'VC++',

teacher:'李老师',

classHour:8},{

id:3,

title:'英语',

teacher:'孙老师',

classHour:16}