样式绑定的方法
1）通过class绑定
class的对象绑定 ：:class="{ activated:isActivated}",根据isActivated的true或false决定dom是否有class="activated"属性
对象绑定有另一种写法：:class="activated",在vue实例的data中定义绑定的对象activated:{ isActivated:true}
2）class的数组绑定：class="[activated]",vue实例的data中activated的值即为class的值，数组内表示变量，数组内可填写多个变量
使用内联样式
3）style的对象绑定
<div :style="styleObj" @click="handleDivClick">Hello world</div>
data:{
styleObj:{
color:"black"
}
},
methods:{
handleDivClick:function() {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
}
4）style的数组绑定
<div :style="[styleObj,{fontSize:'20px'}]" @click = "handleDivClick">hello world</div>
data:{
styleObj:{
color:"black"
}
},
methods:{
handleDivClick:function() {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
}
}