几种动态设置样式的方法

样式类绑定：

<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>