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>