Vue的class和Style綁定

通過 v-bind:class 或者 :class 來為style或者class來綁定

綁定class

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

js代碼

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

或者下面的代碼也可以實現

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

js代碼

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

通過過數組將class綁定

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

js代碼

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

綁定style屬性

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

js代碼

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

發佈留言