Vue的样式绑定
css:
.active{
color:red;
}
方法一:对象
: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" } } })