VUE课程---15、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、vue绑定class时数组语法注意？
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模板中解析数组和对象的特点（数据是否带引号的时候）？
1、无论是数组还是对象，元素有引号就当做字符串解析，没带引号的就当做变量解析
2、对象的键值对中的键一般不用带引号，但是如果键中有短号（例如big-1），则需要带引号
<p v-bind:class="{big:true}">{{msg}}</p> <p v-bind:class="{'big-1':true}">{{msg}}</p>
二、class类绑定
博客对应课程的视频位置：15、class类绑定
https://www.fanrenyi.com/video/26/232
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>class类绑定</title> 6 <style> 7 .red{color: red} 8 .big{font-size: 30px} 9 .big-1{font-size: 40px} 10 .italic{font-style: italic} 11 </style> 12 </head> 13 <body> 14 <!-- 15 16 注意点： 17 在vue的指令中，如果没有带引号，那么会被当做变量来解析， 18 就会去vue里面找，如果没有找到，就会报错 19 如果带引号了，就会被直接当成字符串来解析 20 21 --> 22 <!--<p class="red" style="font-size: 30px"></p>--> 23 <div id="app"> 24 <!--1、用变量的方式--> 25 <!-- <p v-bind:class="red">{{msg}}</p>--> 26 27 <!--2、用字符串的方式--> 28 <!-- <p v-bind:class="'red big italic'">{{msg}}</p>--> 29 30 <!--3、数组的方式--> 31 <!--会依次将数组里面的元素解析到class属性里面--> 32 33 <!--在数组里面放字符串--> 34 <!-- <p v-bind:class="['red','big']">{{msg}}</p>--> 35 <!--在数组里面放变量--> 36 <!-- <p v-bind:class="[red1,'big']">{{msg}}</p>--> 37 <!--在数组里面放三元表达式--> 38 <!-- <p v-bind:class="[red1,isBig?'big':'']">{{msg}}</p>--> 39 <!--在数组里面放对象--> 40 <!-- <p v-bind:class="[red1,{'big':false}]">{{msg}}</p>--> 41 42 <!--4、对象的方式--> 43 <!--对象里面属性名对应的属性值为true的话，就把属性名绑定到class属性--> 44 <!-- <p v-bind:class="{big:true}">{{msg}}</p>--> 45 <!-- <p v-bind:class="{'big-1':true}">{{msg}}</p>--> 46 <!-- <p v-bind:class="{'big':true,'red':true}">{{msg}}</p>--> 47 <!-- <p v-bind:class="class2">{{msg}}</p>--> 48 49 </div> 50 <script src="../js/vue.js"></script> 51 <script> 52 new Vue({ 53 el:'#app', //element 54 data:{ 55 msg:'欢迎来到vue的世界', 56 red:'red', 57 red1:'red italic', 58 isBig:false, 59 class2:{'big':true,'red':true} 60 } 61 }); 62 </script> 63 </body> 64 </html>