Vue官方文档(5): v-bind绑定class

将v-bind(:)用于class时，可以使用对象或数组给class赋值，
data:

 data() {
      return {
          class1:true,
          class2:true,
      };
    }

CSS:

<style >
    .class1 {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

    .class2 {
    font-size:24px;
  }

</style>

v-bind class绑定对象：

<div v-bind:class="{ class1: class1, class2: class2 }">this is a desk</div>

因为data中class1和class2都为ture,所以，class1和class2这两个style都会绑定到上述div中，呈现出来的效果如下：

使用数组进行绑定：
data:

          myClass1: "class1",
          myClass2: "class2",

html:

    <div v-bind:class="[myClass1,myClass2]">that is a book</div>

效果：