方法1.class对象的动态绑定
<div @click=”handleClick” :class=”{activated:isActivated}”>hahha<div>
data(){
return{
isActivated:false
}
}
handleClick(){
this.isActivated=!this.isActivated
}
.activated{color:red}
方法2.class数组
<div @click=”handleClick” :class=”[isActivated,....]”>hahha<div>
data(){
return{
isActivated:””
}
}
handleClick(){
this.isActivated=this.isActivated===”activated”?” ”:”activated”
}
.activated{color:red}
方法3 style样式–对象
<div @click=”handleClick” :style=”isActivated”>hahha<div>
data(){
return{
isActivated:{
color:’block’
}
}
}
handleClick(){
this.isActivated.color=this.isActivated.color===”block”?”red”:”block”
}
方法4 style样式–数组对象(可写多个对象)
<div @click=”handleClick” :style=”[isActivated,{fontSize:’20px’}]”>hahha<div>
data(){
return{
isActivated:{
color:’block’
}
}
}
handleClick(){
this.isActivated.color=this.isActivated.color===”block”?”red”:”block”
}