基础-Vue样式的绑定

1、class和对象绑定，通过isActivated的布尔值进行类修改

//通过取反设置isActivated，为真，activated显示，反之不显示
<div :class="{ activated : isActivated}"> HelloWorld </div>

2、class可以和数组绑定，这时数组中的是变量，数组中可以写多个

//此时数组中为空，activated初始值为空
<div :class="[activated,activated1]"> HelloWorld </div>
//使用三元表达式进行判断，如果不存在向数组内添加类名，反之置为空
this.activated = this.activated === "activated" ? "" : "activated",

3、通过style和methods写内联样式

//绑定style属性，通过修改data中styleObj.color的属性的值修改行内样式
<div :style="styleObj"> HelloWorld </div>

data:{
  styleObj:{
 	color : "red"
 }

 this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"

4、同时可以写数组，写多个样式

:style="[styleObj,{fontSize:'20px'}]"