VUE课程---16、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、vue中绑定内联样式的对象语法和数组语法是什么？
绑定内联样式对象语法：键值对表示样式名和样式值，例如：<p :style="{color:'red','font-size':'30px'}">{{msg}}</p>
绑定内联样式数组语法：数组里面可以放多个表示样式的对象，例如：<p :style="[style1,style2]">{{msg}}</p>
2、vue中绑定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、vue中绑定class样式和绑定内联（style）样式 时候 数组语法和对象语法 有区别的本质原因是什么？
指定样式的时候，用class只需要一个值，而用style的话，每个样式都需要两个值（样式名和样式值）
二、style样式绑定
博客对应课程的视频位置：16、style样式绑定
https://www.fanrenyi.com/video/26/233
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 <!--1、以字符串的方式-->
13 <p v-bind:style="'color: red;font-size: 30px;'">{{msg}}</p>
14
15
16 <!--2、以变量的方式-->
17 <p v-bind:style="style1">{{msg}}</p>
18
19
20 <!--3、对象语法-->
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 <!--4、数组语法-->
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>
来源：oschina
链接：https://my.oschina.net/u/4362791/blog/4280634