Vue的class绑定和style绑定

1. vue的class绑定

1.1 对象语法

键名对应的class是否存在取决于值对应的变量的truthiness。
可以通过传给:class一个对象来动态的切换class，这个对象可以不必内联定义在模板里。可以传入多个class，此外通过动态绑定的class也可以和普通的class属性共存。

<div :class="{ active: isActive }"></div>					// 传入对象	
<div class="static" :class="{ active: isActive }"></div>    // 共存
<div :class="classObj"></div>								// 无需定义在模板中
data: {
	classObj: {
		active: true,
		'text-danger': false
	}
}

1.2 数组语法

可以把一个数组传给:class，来应用数组中的所有class。在数组语法中也可以混入三元表达式或者对象语法来实现更为复杂的功能。

// 传入数组应用多个class
<div :class="[activeClass, errorClass]" />
data: {
	activeClass: 'active',
	errorClass: 'text-danger'
}
// 使用三元组
<div :class="[isActive ? activeClass : '', errorClass]" />
// 使用对象表达式
<div :class="[{ active: isActive }, errorClass]" />

1.3 使用在组件上面

1. 自定义组件上的class属性的值会被合并到根元素上。
2. 动态绑定的class属性同样适用于上一条规则。

2. vue的style绑定

2.1 对象语法

形式类似于class绑定，直接给:style传入一个对象。需要注意的是键的写法。CSS属性名（键名）可以使用小驼峰写法或者短横线分割写法来命名。

<div :style="{ color: activeColor, fontSize: fontSize + 'px'}" />
data: {
	activeColor: red,
	fontSize: 30
}

2.2 数组语法

传入数组的元素是各个样式对象

<div :style="[baseStyles, overridingStyles]" />