VUE课程参考---11、class类绑定
一、总结
一句话总结：
vue中绑定class有数组语法和对象语法，数组语法的时候会依次将数组里面的元素解析到class里面，对象语法就是将键值对中的值为true的键添加到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>
1、vue中绑定class的数组语法和对象语法？
数组语法：<p :class="['red','big']">{{msg}}</p>：会依次将'red'和'big'解析到class里面
对象语法：<p :class="{red:true,'big':isBig}">{{msg}}</p>：键值对的值为true，则将对应的属性名添加到class，为false则不添加
2、数组语法注意？
a、数组里面可以写三元表达式：<p :class="['red',isBig?'big':'']">{{msg}}</p>
b、数组里面可以放对象：<p :class="['italic',{red:true,big:isBig}]">{{msg}}</p>
3、vue中绑定class数据的时候解析数组的原理？
数组语法：<p :class="['red','big']">{{msg}}</p>：会依次将'red'和'big'解析到class里面
4、vue中绑定class数据的时候解析对象的原理？
对象语法：<p :class="{red:true,'big':isBig}">{{msg}}</p>：键值对的值为true，则将对应的属性名添加到class，为false则不添加
5、vue中绑定class数据的时候 数组语法扩展？
a、数组里面可以写三元表达式：<p :class="['red',isBig?'big':'']">{{msg}}</p>
b、数组里面可以放对象：<p :class="['italic',{red:true,big:isBig}]">{{msg}}</p>
6、vue模板中解析数组和对象的特点（数据是否带引号的时候）？
1、无论是数组还是对象，元素有引号就当做字符串解析，没带引号的就当做变量（js表达式）解析
2、对象的键值对中的键一般不用带引号，但是如果键中有短号（例如big-ab），则需要带引号
二、class类绑定
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11、class类绑定</title> 6 <style> 7 .red { 8 color: red; 9 } 10 11 .purple { 12 color: purple; 13 } 14 15 .big { 16 font-size: 30px; 17 } 18 19 .italic { 20 font-style: italic; 21 } 22 </style> 23 </head> 24 <body> 25 <!-- 26 27 标签上的class也是属性，绑定属性也是用v-bind 28 29 vue中绑定class有数组语法和对象语法 30 数组语法： 31 <p :class="['red','big']">{{msg}}</p>： 32 会依次将'red'和'big'解析到class里面 33 34 对象语法： 35 <p :class="{red:true,'big':isBig}">{{msg}}</p>： 36 键值对的值为true，则将对应的属性名添加到class，为false则不添加 37 38 39 数组语法扩展： 40 a、数组里面可以写三元表达式：<p :class="['red',isBig?'big':'']">{{msg}}</p> 41 b、数组里面可以放对象：<p :class="['italic',{red:true,big:isBig}]">{{msg}}</p> 42 43 vue模板中解析数组和对象的特点 44 1、无论是数组还是对象，元素有引号就当做字符串解析，没带引号的就当做变量（js表达式）解析 45 2、对象的键值对中的键一般不用带引号，但是如果键中有短号（例如big-ab），则需要带引号 46 47 --> 48 <div id="app"> 49 <!--1、数组语法--> 50 <p :class="['red','big']">{{msg}}</p> 51 <!--数组里面的三元表达式--> 52 <p :class="['red',isBig?'big':'']">{{msg}}</p> 53 <!--数组里面放对象--> 54 <p :class="['italic',{red:true,big:isBig}]">{{msg}}</p> 55 <p :class="['italic',class1]">{{msg}}</p> 56 57 58 <!--2、对象语法--> 59 <p :class="{red:true,'big':isBig}">{{msg}}</p> 60 <!--对象在vue实例中--> 61 <p :class="class1">{{msg}}</p> 62 </div> 63 <script src="../js/vue.js"></script> 64 <script> 65 let vm = new Vue({ 66 el: '#app', 67 data: { 68 msg: '我有一只小毛驴，我永远也不骑', 69 isBig: true, 70 class1: {red: true, big: true} 71 } 72 }); 73 </script> 74 </body> 75 </html>
