Vue的样式绑定

css：

.active{
color:red;
}

　　

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

方法一：对象

:class

<div @click="handleDiv" :class="{active:isactive}">
    hello
</div>

		var app = new Vue({
				el:"#app",
				data:{
					isactive:false;
				},
				
				methods:{
					handleDiv:function(){
					this.isactive=!this.isactive 	
					}
					
				}
			})
			

　　

方法二：数组

:class

 

<div @click="handleDiv" :class="[active]" >world</div>

　　

var app = new Vue({
				el:"#app",
				data:{
				active:'';	
				},
				
				methods:{
					handleDiv:function(){	
					this.active = this.active==="active"?'':"active" 
					}
					
				}
			})
			

　　

方法三：对象

:style

<div @click="handleDiv"  :style="styleObj" >world</div>

　

	var app = new Vue({
				el:"#app",
				data:{
					styleObj:{
						color:"black"
					}
				},
				methods:{
						this.styleObj.color= this.styleObj.color==="black" ? "red":"black"
					}
				}
			})
			

　　

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄