當我們在開發前端頁面時，經常需要對頁面元素進行添加或刪除樣式的操作。這些操作可以通過JavaScript來實現，但使用Vue.js框架可以更加方便和簡潔地進行操作。

Vue.js提供了一些指令來方便地操作DOM元素。在本文中，我們將介紹如何使用Vue.js來添加和刪除樣式。

添加樣式

Hello World
new Vue({
el: '#app',
data: {
isActive: true
}
})

在上面的代碼中，我們為p元素添加了一個class屬性，并將其綁定到isActive變量。當isActive的值為true時，該元素將添加active類，從而實現添加樣式的效果。

刪除樣式

Hello World
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})

在上面的代碼中，我們為p元素添加了兩個class屬性，并將它們綁定到isActive和hasError變量。當isActive的值為true時，該元素將添加active類，當hasError的值為true時，該元素將添加text-danger類。如果我們需要刪除這些樣式，只需要將對應變量的值改為false即可。

動態綁定樣式

Hello World
new Vue({
el: '#app',
data: {
isActive: true,
errorClass: 'text-danger'
}
})

在上面的代碼中，我們使用了動態綁定class。我們將一個數組作為:class的屬性值，并在數組中添加了兩個對象。第一個對象表示當isActive的值為true時，該元素將添加active類。第二個對象則表示該元素會動態地添加一個errorClass屬性對應的類。

總結

使用Vue.js添加和刪除樣式非常方便，并且可以根據動態變量進行定制。這種方式不僅可以提高開發效率和可維護性，還可以使代碼更加簡潔和易讀。