在Vue中，我們經常需要根據條件來決定某些元素是否顯示，Vue提供了一種便捷的方式來實現這個功能，那就是使用class條件。

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

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

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

當然，我們還可以使用條件表達式來指定不同的class。假如我們需要控制一個按鈕的class：當isDisabled為true時，按鈕為灰色且不可點擊（class為disabled），當isDisabled為false時，按鈕為藍色且可點擊（class為enabled）。那么代碼如下：

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

以上的代碼中，當isDisabled為true時，按鈕將擁有disabled這個class，為false時將擁有enabled這個class。