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>