Vue- 类与样式

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中没有样式。