使用vue 條件添加class是一個非常實用的前端技巧。當我們需要根據不同的條件來添加不同的class時，vue提供了多種方式來實現。我們可以根據布爾值、字符串、對象等不同的方式來控制class的添加和刪除。

首先，我們看一下最簡單的方式：使用布爾值來控制class的添加和刪除。我們可以使用v-bind:class指令來實現。例如：

<div v-bind:class="{ active: isActive }"></div>

上述代碼中，我們使用了isActive變量來控制class的添加和刪除。當isActive的值為true時，會自動添加active class。當值為false時，會自動刪除。這是最基本的一種方式。

其次，我們可以使用字符串來控制class的添加和刪除。同樣是使用v-bind:class指令來實現。例如：

<div v-bind:class="classObject"></div>
Vue.component('my-component', {
data: function () {
return {
classObject: 'red'
}
}
})

上述代碼中，我們定義了一個classObject變量，并將其設置為red字符串。這樣，我們就可以將red字符串添加到classObject中，從而添加red class。如果需要刪除該class，只需要將字符串的值設置為空即可。

最后，我們還可以使用對象來控制class的添加和刪除。同樣是使用v-bind:class指令來實現。例如：

<div v-bind:class="classObject"></div>
Vue.component('my-component', {
data: function () {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
})

上述代碼中，我們定義了一個classObject對象，并設置了兩個屬性：active和text-danger。當active屬性為true時，會自動添加active class。當text-danger屬性為true時，會自動添加text-danger class。如果需要刪除這些class，只需將其對應的屬性值設置為false即可。

總之，vue提供了多種方式來實現條件添加class的效果，開發者可以根據自己的需求選擇最適合的方式。通過這些技巧，我們可以更加靈活地控制網頁的樣式，從而打造更好的用戶體驗。