Vue的class和Style绑定

通过 v-bind:class 或者 :class 来为style或者class来绑定

绑定class

 <div class="test">
        <div :class="{active:isActive,cc:isCc}"></div>
    </div>

js代码

 var myVue = new Vue({
        el: ".test",
        data: {
            isActive:true,
            isCc:false
        },
    });

或者下面的代码也可以实现

 <div class="test">
        <div :class=classObject></div>
    </div>

js代码

var myVue = new Vue({
        el: ".test",
        data: {
            classObject:{
                active:true
            }
        },
    });

通过过数组将class绑定

   <div class="test">
        <div :class="[activeClass,error]">dsdsd</div>
    </div>

js代码

 var myVue = new Vue({
        el: ".test",
        data: {
            activeClass:"active",
            error:"ddd"
        },
    });

绑定style属性

<div class="test">
        <div :style=styleObject>dsdsd</div>
    </div>

js代码

   var myVue = new Vue({
        el: ".test",
        data: {
            styleObject:{
              color: "red",
                fontSize: "30px"
            }
        },
    });