几种动态设置样式的方法

样式类绑定：

<div class="demo" @click="sttachRed = !attachRed" :class="{red:attachRed}"></div>

使用对象：
<div class="demo" @click="sttachRed = !attachRed" :class="divClasses"></div>
computed:{ 
    divClasses:function(){
            return {
                    red:this.attachRed,
                    blue:!this.attachRed
            }
        }
}

使用命名：
css中定义.red，.green，.blue样式。
<div class="demo"  :class="[color,{red:attachRed}]"> </div>

data:{
        attachRed:false,
        color:'greed'
        }

        动态设置样式，不使用CSS类：
        <div class="demo" :style="{backgroundColor:color}></div>
        data:{color:'gray'}    或
        <div class="demo" :style="mystyle"></div>
        computed:{
            mystyle:function(){
                return {
                    backgroundColor:this.color,
                    width:this.width + 'px'
                }
            }
        }

        数组语法设置元素样式
        <div class="demo" :style="[mystyle,{  height:width+'px' }]"></div>