在Vue中，我們經(jīng)常需要根據(jù)條件來決定某些元素是否顯示，Vue提供了一種便捷的方式來實(shí)現(xiàn)這個(gè)功能，那就是使用class條件。

首先我們需要定義一個(gè)布爾型的變量，比方說isShow。然后我們可以在模板中使用v-bind:class指令來控制元素的class屬性，具體的做法就是在class屬性的值中使用一個(gè)對(duì)象，對(duì)象的屬性名是class名，屬性值是一個(gè)布爾值，類似下面的代碼：

<template>
<div v-bind:class="{ red: isShow }">我是一個(gè)div</div>
</template>
<script>
export default {
data() {
return {
isShow: true,
}
},
}
</script>

以上的代碼中，當(dāng)isShow為true時(shí)，div元素將擁有red這個(gè)class；當(dāng)isShow為false時(shí)，div元素將不擁有red這個(gè)class。這樣，在編寫樣式的時(shí)候，可以用.red來定義元素顯示時(shí)的樣式。

當(dāng)然，我們還可以使用條件表達(dá)式來指定不同的class。假如我們需要控制一個(gè)按鈕的class：當(dāng)isDisabled為true時(shí)，按鈕為灰色且不可點(diǎn)擊（class為disabled），當(dāng)isDisabled為false時(shí)，按鈕為藍(lán)色且可點(diǎn)擊（class為enabled）。那么代碼如下：

<template>
<button v-bind:class="{ disabled: isDisabled, enabled: !isDisabled }">按鈕</button>
</template>
<script>
export default {
data() {
return {
isDisabled: true,
}
},
}
</script>

以上的代碼中，當(dāng)isDisabled為true時(shí)，按鈕將擁有disabled這個(gè)class，為false時(shí)將擁有enabled這個(gè)class。