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

第5章樣式綁定Contents目錄綁定HTML樣式01綁定內聯樣式02實現列表行的奇偶行不同樣式0301綁定HTML樣式PART對象控制樣式在Vue3中，除了可以使用字符串為屬性賦值之外，也可以使用對象或數組為屬性賦值可以通過傳給v-bind:class一個對象，來動態(tài)地切換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代碼進行修改將代碼再次運行后，可以明顯發(fā)現普通的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實例先定義針對偶數行的樣式規(guī)則表格的數據采用v-for指令循環(huán)輸出，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}