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>


 

VUE课程参考---11、class类绑定_键值对