Vue控制樣式的常用方法

一、動態綁定：

　　1）<div v-bind:class="{'class1': boolean}">v-bind:class 指令</div>

　　　　//多參數：:class={'class1':true,'class2':true}

　　2）<div :class="class1"></div>

　　　　//多參數：<div :class="[class1,class2]"></div>

二、computed：

　　1）<div :class="divClasses"></div>

　　2）<div :style="divClasses"></div>

    new Vue({
        el:'#app',
        data:{
            b:true
        },
        computed:{
            divClasses:function () {
                //返回一個json對象；
                return{
                    class1:this.b,
                    class2:this.b
                }
            }
        }
    })

三、雙向綁定方式：

　　<div :class="divClasses"></div>

四、內聯樣式：

　　<div :style="{backgroundColor：red}"></div>

　　//1）必須有大括號，json格式；2）多單詞，后面的單詞去掉-變為大寫；

　　//多參數：<div :style="{height: '100px',width: '100px',backgroundColor:'red'}"></div>

　　//多參數數組：<div :style="[{height: '100px'},{width: '100px'},{backgroundColor:'red'}]"></div>