Vue的类与样式除了普通的style形式外，还可以有对象语法、数组语法来表示类；
对象语法适合较多的class名或者动态的class
数组语法适合较少的class名
数组样式
如下面代码
...
<div :class="[a1,a2]">数组样式</div>
...
data() {
return {
a1:'text-1',
a2:'text-2'
};
},
上诉代码div元素的class以一个数据表示，其中a1,a2在data中定义
检测DOM元素，可以看到样式生效了：
DOM1
对象样式
一
如下代码：
...
<div :class="{'text-1':b1}">对象样式</div>
...
data() {
return {
a1:'text-1',
a2:'text-2',
b1:true
};
上述代码可以看到div元素的class是一个对象，其中text-1是依赖于b1存在的，在data中，b1的值为一个bool值，当b1为true的时候，div的class为text-1,当b1位false时，则class没有值；
检测DOM元素：
-
b1为true的时候：
image.png -
b1为false的时候：
image.png
二
对象样式还可以表示成直接在class里面传入一个data定义的对象，如代码：
<div :class="obj">对象样式2</div>
#data里面的数据
data() {
return {
a1:'text-1',
a2:'text-2',
b1:false,
obj:{
'text-1':true,
'text-2':true
}
};
上述代码很好理解了，由于class传入的是对象obj，obj中text-1和text-2都为true，所以class样式为text-1 text-2
检测DOM元素，如图：
image.png
同理，如果text-1对呀的值为false，则class样式就为text-2。如果都为false的话，则clas中没有样式。
