vue中通过v-bind绑定元素的class属性为元素设置样式

1，直接传递一个数组

 <style>
    .mcolor{
        color:red;
    }
    .mweight{
        font-weight: 200;
    }
    .msize{
        font-size:30px;
    }
    </style>

<h4 v-bind:class="['mcolor','msize','mweight']">这是一个h4标签，用来测试vue中的class样式的</h4>

2,数组中运用三元表达式

<h4 v-cloak v-bind:class="['mcolor','mweight',istrue?'msize':'']">{{msg}}</h4>

var vm=new Vue({
          el:"#app",
          data:{
              msg:"这是一个h4标签，用来测试vue中的class样式的",
              istrue:false
          }
      })

3,数组中嵌套对象（它比三元表达式的数据可读性更好一些）

<h4 v-cloak v-bind:class="['mcolor','mweight',{'msize':istrue}]">{{msg}}</h4>

var vm=new Vue({
          el:"#app",
          data:{
              msg:"这是一个h4标签，用来测试vue中的class样式的",
              istrue:false,
              classobj:{mcolor:true,mweight:true,msize:true}
          }
      })

4,直接使用对象
(1)

<h4 v-cloak v-bind:class="{mcolor:false,mweight:true,msize:true}">{{msg}}</h4>

(2)

<h4 v-cloak v-bind:class="classobj">{{msg}}</h4>

var vm=new Vue({
          el:"#app",
          data:{
              msg:"这是一个h4标签，用来测试vue中的class样式的",
              istrue:true,
              classobj:{mcolor:true,mweight:true,msize:true}
          }
      })