1.以对象的形式
<div id="app" @click="changeClick" :class="{activeted:change}">hello</div>
或者绑定多个
<div id="app" @click="changeClick" :class="{activeted:change,abc:hello}">hello</div>
2.以数组的形式
<div id="app" @click="changeClick" :class="[activeted,def]">hello</div>
<script>
var vm= new Vue({
el:‘#app‘,
data:{
activeted:‘‘,
def:‘‘
},
methods:{
changeClick:function(){
this.activeted=this.activeted===‘abc‘? ‘‘ : ‘abc‘;
this.def=this.def===‘def‘? ‘‘ : ‘def‘;
}
}
})
</script>
还可以通过行内样式P:style绑定样式
<div id="app" @click="changeClick" :class="[activeted,def]" :style="[obj,{backGround:‘#333‘}]">hello</div>
<script>
var vm= new Vue({
el:‘#app‘,
data:{
activeted:‘‘,
def:‘‘,
obj:{
fontWeight:‘bold‘
}
},
methods:{
changeClick:function(){
this.activeted=this.activeted===‘abc‘? ‘‘ : ‘abc‘;
this.def=this.def===‘def‘? ‘‘ : ‘def‘;
}
}
})
</script>
vue动态绑定class
原文：https://www.cnblogs.com/hilxj/p/10973785.html
