【Vue】Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTMLclass

1. 对象语法

传给v-bind:class一个对象以动态切换class.

<div v-bind:class="{active:isActive}"></div>
<div class="static"
     v-bind:class="{active:isActive,'text-danger':hasError}">
</div>

上述可知，v-bind指令也可以和普通的class attribute共存.

绑定的数据对象不必内联定义在模板里，例如：

<div v-bind:class="classObject"></div>
data:{
	classObject:{
		active:true,
		"text-danger":false
}
}

也可以绑定一个返回对象的计算属性：

data:{
	isActive:true,
	error:null
},
computed:{
	classObject:function(){
		return{
			active:this.isActive&&!this.error,
			'text-danger':this.error&& this.error.type==='fatal'
}
}
}

2. 数组语法

我们可以把一个数组传给v-bind:class，以应用一个class列表

<div v-bind:class="[activeClass,errorClass]"></div>
....
data:{
	activeClass:'active',
	errorClass:'text-danger'
}
//渲染为：
<div class="active text-danger"></div>

想要根据条件切换列表中的class，可以用三元表达式

在数组语法中也可以使用对象语法：

<div v-bind:class="[{active:isActive},errorClass]"></div>

绑定内联样式

1. 对象语法

<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>
data:{
	activeColor:'red',
	fontSize:30
}
//或者
<div v-bind:style="styleObject"></div>
data:{
	styleObject:{
		color:'red',
		fontSize:'13px'
}
}

同样的，对象语法常常结合返回对象的计算属性使用。

2. 数组语法

和class绑定相似，不再记录

3. 自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

参考来源：https://cn.vuejs.org/v2/guide/class-and-style.html