VUE课程参考---12、style样式绑定
一、总结
一句话总结：
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>
1、绑定内联样式也有对象语法和数组语法？
绑定内联样式对象语法：键值对表示属性和属性值，例如：<p :style="{color:'red','font-size':'30px'}">{{msg}}</p>，'red'和'30px'可以用vue中的变量代替
绑定内联样式数组语法：数组里面可以放多个表示样式的对象，例如：<p :style="[style1,style2]">{{msg}}</p>
2、绑定class样式和绑定内联（style）样式的数组语法和对象语法的区别？
绑定class样式：对象语法会在键值对的值为true，则将对应的属性名添加到class，为false则不添加；数组语法会依次将数组中的元素解析到class里面；
绑定内联（style）样式：对象语法就是键值对表示属性和属性值；数组语法就是数组里面可以放多个表示样式的对象
绑定class样式 <div id="app"> <!--1、数组语法--> <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> <!--2、对象语法--> <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>
3、绑定class样式和绑定内联（style）样式 时候 数组语法和对象语法 有区别的本质原因是什么？
指定样式的时候，用class只需要一个值，而用style的话，每个样式都需要两个值（样式名和样式值）
二、style样式绑定
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12、style样式绑定</title> 6 </head> 7 <body> 8 <!-- 9 绑定内联样式 10 11 style样式绑定（内联样式绑定）也有对象语法和数组语法，对象语法就是键值对表示属性和属性值，数组语法就是数组里面可以放多个表示样式的对象 12 13 14 绑定内联样式也有对象语法和数组语法 15 绑定内联样式对象语法：键值对表示属性和属性值，例如：<p :style="{color:'red','font-size':'30px'}">{{msg}}</p>，'red'和'30px'可以用vue中的变量代替 16 绑定内联样式数组语法：数组里面可以放多个表示样式的对象，例如：<p :style="[style1,style2]">{{msg}}</p> 17 18 绑定class样式和绑定内联（style）样式的数组语法和对象语法的区别 19 绑定class样式：对象语法会在键值对的值为true，则将对应的属性名添加到class，为false则不添加；数组语法会依次将数组中的元素解析到class里面； 20 绑定内联（style）样式：对象语法就是键值对表示属性和属性值；数组语法就是数组里面可以放多个表示样式的对象 21 22 --> 23 <div id="app"> 24 <!--对象语法--> 25 <p :style="{color:'red','font-size':'30px'}">{{msg}}</p> 26 <!--用vue实例中的data--> 27 <p :style="{color:activeColor,'font-size':fontSize+'px'}">{{msg}}</p> 28 <!--直接用对象--> 29 <p :style="style1">{{msg}}</p> 30 31 <!--数组语法--> 32 <p :style="[style1,style2]">{{msg}}</p> 33 34 </div> 35 <script src="../js/vue.js"></script> 36 <script> 37 let vm = new Vue({ 38 el: '#app', 39 data: { 40 msg: '我有一只小毛驴，我永远也不骑', 41 activeColor:'purple', 42 fontSize:'50', 43 style1:{color:'blue','font-size':'30px'}, 44 style2:{'font-weight':600} 45 } 46 }); 47 </script> 48 </body> 49 </html>
