《Vue 3基礎(chǔ)入門》課件 第五章 樣式綁定

第5章樣式綁定Contents目錄綁定HTML樣式01綁定內(nèi)聯(lián)樣式02實(shí)現(xiàn)列表行的奇偶行不同樣式0301綁定HTML樣式PART對象控制樣式在Vue3中，除了可以使用字符串為屬性賦值之外，也可以使用對象或數(shù)組為屬性賦值可以通過傳給v-bind:class一個(gè)對象，來動(dòng)態(tài)地切換class屬性值當(dāng)返回的isActive的值為true時(shí)，樣式被成功渲染在控制臺中輸入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代碼進(jìn)行修改將代碼再次運(yùn)行后，可以明顯發(fā)現(xiàn)普通的class屬性和v-bind:class指令實(shí)現(xiàn)了共存<divclass="static"v-bind:class="{active:isActive,'text-danger':hasError}"></div>data(){return{isActive:true,hasError:false}}對象控制樣式如果需綁定的數(shù)據(jù)對象比較復(fù)雜時(shí)，可以選擇在數(shù)據(jù)屬性中單獨(dú)定義一個(gè)對象進(jìn)行綁定通過返回對象的計(jì)算屬性來進(jìn)行綁定也是可行的<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>數(shù)組控制樣式通過將數(shù)組傳給v-bind:class，這樣會在元素上應(yīng)用一個(gè)樣式列表若想根據(jù)條件來切換在列表中的樣式時(shí)，可以使用三元表達(dá)式來切換簡化的對象語法也是可以使用的<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>組件中的應(yīng)用在一個(gè)自定義單根元素組件上使用class屬性時(shí)，會將樣式添加到組件的根元素上，而不會進(jìn)行覆蓋對于帶數(shù)據(jù)綁定的class屬性同樣適用組件中存在多個(gè)根元素時(shí)，需要通過使用$attrs組件屬性去指定那個(gè)根元素去接收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綁定內(nèi)聯(lián)樣式PART對象描述樣式v-bind:style可以給元素綁定內(nèi)聯(lián)樣式，它實(shí)際上是一個(gè)JS對象通過在數(shù)據(jù)屬性中定義一個(gè)樣式對象，進(jìn)而使用v-bind:style進(jìn)行綁定該對象也是可行的<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>數(shù)組描述樣式v-bind:style的數(shù)組語法可以將多個(gè)樣式對象應(yīng)用到同一個(gè)元素上v-bind:style接一個(gè)樣式對象數(shù)組[baseStyle,moreStyle]，可以將數(shù)組中的每一個(gè)樣式對象的樣式渲染出來。自定義的兩個(gè)樣式對象<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>其它當(dāng)v-bind:style使用需要添加瀏覽器引擎前綴的CSS屬性時(shí)，Vue3會自動(dòng)偵測并添加相應(yīng)的前綴可以為綁定的style屬性賦一個(gè)包含多個(gè)帶前綴的數(shù)組，這樣只會渲染數(shù)組中最后一個(gè)被瀏覽器支持的值若瀏覽器支持不帶瀏覽器前綴的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實(shí)例：實(shí)現(xiàn)列表行的奇偶行不同樣式PART實(shí)例先定義針對偶數(shù)行的樣式規(guī)則表格的數(shù)據(jù)采用v-for指令循環(huán)輸出，v-for指令可攜帶一個(gè)參數(shù)，根據(jù)這個(gè)索引參數(shù)欄判斷奇偶行.even{background-color:#cdedcd;}<divid="app"v-cloak><table><tr><th>序號</th>

<th>課程</th><th>教師</th><th>課時(shí)</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>實(shí)例books數(shù)組實(shí)際上是一個(gè)對象數(shù)組，其中每個(gè)對象都包含了一本書籍的詳細(xì)信息<script>constvm=Vue.createApp({data(){return{books:[{

id:1,

title:'高等數(shù)學(xué)',

teacher:'王老師',

classHour:32},{id:2,

title:'VC++',

teacher:'李老師',

classHour:8},{

id:3,

title:'英語',

teacher:'孫老師',

classHour:16}