VUE :class 动态class方法

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

vue官方文档对于class和style绑定有两种方法，对象语法和数组语法。

1.绑定 HTML Class对象绑定

我们用传给v-bind:class 一个对象，动态切换class 是否存在

<div v-bind:class="{ active: isActive }"></div> ; //这里我们使用isActive 这个变量动态判断active是否显示到html

vue对象里面

data: {
	isActive:true,//判断是否显示active这个class
}

页面渲染为：

<div class="active"></div>

当然我们也可以对象中传入更多属性来动态切换多个 class，此外，v-bind:class 指令也可以与普通的 class 属性共存。

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> 
	动态切换多个 class
</div>

vue对象里面

data: {
	isActive:true,	
	hasError:false
}

页面渲染为：

`<div class="static active">` 动态切换多个 class`</div>`

对于上面v-bind:class 指令我们也可以传一个对象

<div v-bind:class="classObject">动态切换多个 class</div>

data: {
	classObject: {	
		active: true,
		'text-danger': false
	}
}

页面渲染为：

<div class="active"> 动态切换多个 class</div>

对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值

<div v-bind:class="classObject"></div>

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

2.绑定 HTML Class数组语法

除了对象语法绑定class,我们还有一种方法是数组语法，我们可以把一个数组传给 v-bind: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="[isActive ? activeClass : ' ', errorClass]"></div> ;

//这里判断是如果isActive 为true显示activeClass ，errorClass，否则只显示errorClass

对于class绑定当有多个条件 class 时这样写有些繁琐，在数组语法中也可以使用对象语法，例如如下写法：

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