VUE課程---1六、style樣式綁定
1、總結
一句話總結：
style樣式綁定（內聯樣式綁定）也有對象語法和數組語法，對象語法就是鍵值對錶示樣式名和樣式值，數組語法就是數組裏面能夠放多個表示樣式的對象
<div id="app"> <!--對象語法--> <p :style="{color:'red','font-size':'30px'}">{{msg}}</p> <!--用vue實例中的data--> <p :style="{color:activeColor,'font-size':fontSize+'px'}">{{msg}}</p> <!--直接用對象--> <p :style="style1">{{msg}}</p> <!--數組語法--> <p :style="[style1,style2]">{{msg}}</p> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '我有一隻小毛驢，我永遠也不騎', activeColor:'purple', fontSize:'50', style1:{color:'blue','font-size':'30px'}, style2:{'font-weight':600} } }); </script>
一、vue中綁定內聯樣式的對象語法和數組語法是什麼？
綁定內聯樣式對象語法：鍵值對錶示樣式名和樣式值，例如：<p :style="{color:'red','font-size':'30px'}">{{msg}}</p>
綁定內聯樣式數組語法：數組裏面能夠放多個表示樣式的對象，例如：<p :style="[style1,style2]">{{msg}}</p>
二、vue中綁定class樣式和綁定內聯（style）樣式的數組語法和對象語法的區別？
綁定class樣式：對象語法會在鍵值對的值爲true，則將對應的屬性名添加到class，爲false則不添加；數組語法會依次將數組中的元素解析到class裏面；
綁定內聯（style）樣式：對象語法就是鍵值對錶示屬性和屬性值；數組語法就是數組裏面能夠放多個表示樣式的對象
綁定class樣式 <div id="app"> <!--一、數組語法--> <p :class="['red','big']">{{msg}}</p> <!--數組裏面的三元表達式--> <p :class="['red',isBig?'big':'']">{{msg}}</p> <!--數組裏面放對象--> <p :class="['italic',{red:true,big:isBig}]">{{msg}}</p> <p :class="['italic',class1]">{{msg}}</p> <!--二、對象語法--> <p :class="{red:true,'big':isBig}">{{msg}}</p> <!--對象在vue實例中--> <p :class="class1">{{msg}}</p> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '我有一隻小毛驢，我永遠也不騎', isBig: true, class1: {red: true, big: true} } }); </script> 綁定內聯（style）樣式 <div id="app"> <!--對象語法--> <p :style="{color:'red','font-size':'30px'}">{{msg}}</p> <!--用vue實例中的data--> <p :style="{color:activeColor,'font-size':fontSize+'px'}">{{msg}}</p> <!--直接用對象--> <p :style="style1">{{msg}}</p> <!--數組語法--> <p :style="[style1,style2]">{{msg}}</p> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '我有一隻小毛驢，我永遠也不騎', activeColor:'purple', fontSize:'50', style1:{color:'blue','font-size':'30px'}, style2:{'font-weight':600} } }); </script>
三、vue中綁定class樣式和綁定內聯（style）樣式 時候 數組語法和對象語法 有區別的本質緣由是什麼？
指定樣式的時候，用class只須要一個值，而用style的話，每一個樣式都須要兩個值（樣式名和樣式值）
2、style樣式綁定
博客對應課程的視頻位置：1六、style樣式綁定
https://www.fanrenyi.com/video/26/233
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>style樣式綁定</title> 6 </head> 7 <body> 8 <!-- 9 10 --> 11 <div id="app"> 12 <!--一、以字符串的方式--> 13 <p v-bind:style="'color: red;font-size: 30px;'">{{msg}}</p> 14 15 16 <!--二、以變量的方式--> 17 <p v-bind:style="style1">{{msg}}</p> 18 19 20 <!--三、對象語法--> 21 <!-- 22 對象的語法的時候，style裏面的每個樣式的樣式名就對應對象鍵值對裏面的鍵， 23 每個樣式的樣式值就對應對象鍵值對裏面的值 24 --> 25 <!-- 26 對象的鍵值對都要是字符串，而鍵默認就是字符串，因此值也要被設置爲字符串 27 --> 28 <!-- 29 對象解析的時候，將鍵值對中的鍵解析成樣式名，值解析成樣式值 30 --> 31 <p v-bind:style="{color:'red','font-size':'30px'}">{{msg}}</p> 32 <p v-bind:style="style2">{{msg}}</p> 33 34 <!--四、數組語法--> 35 <p v-bind:style="[style2,style3]">{{msg}}</p> 36 37 </div> 38 <script src="../js/vue.js"></script> 39 <script> 40 new Vue({ 41 el:'#app', //element 42 data:{ 43 msg:'歡迎來到vue的世界', 44 style1:'color: red;font-size: 30px;', 45 style2:{color:'red','font-size':'30px'}, 46 style3:{'font-style':'italic'} 47 } 48 }); 49 </script> 50 </body> 51 </html>
