在網頁開發中，我們通常會用到一些交互元素，比如按鈕，當我們點擊按鈕的時候，需要改變按鈕的狀態。Vue是一種流行的JavaScript框架，它可以幫助我們快速地實現交互效果。在本文中，我們將介紹如何使用Vue來改變按鈕的狀態。

按鈕

上面這段代碼是一個基本的按鈕組件，它有一個isActive變量表示按鈕的狀態，當isActive為true時，按鈕的狀態為active，反之為false。我們可以使用Vue的指令v-bind:class來動態綁定類名，當isActive為true時，按鈕的類名為active。

接下來，我們需要定義Vue組件的實例，我們可以在組件的data屬性中定義isActive變量，并在組件的methods屬性中定義一個toggleActive方法來實現按鈕狀態的切換。

var app = new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive
}
}
})

在這個組件中，我們定義了一個叫做app的Vue實例，并指定了el分別的處理按鈕的容器（#app）,data屬性中定義了一個isActive變量，方法中定義的toggleActive方法通過切換isActive變量的值來改變按鈕的狀態。

我們還可以為按鈕添加一些其他的處理邏輯，比如當按鈕被點擊時，通過Ajax請求來更新button的狀態。這個可以通過Vue的生命周期鉤子函數來實現。

var app = new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive
this.updateStatus()
},
updateStatus: function() {
axios.post('/api/updateStatus', {
status: this.isActive
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
},
mounted: function() {
this.getStatus()
},
getStatus: function() {
axios.get('/api/getStatus')
.then(function (response) {
this.isActive = response.data.status
})
.catch(function (error) {
console.log(error)
})
}
})

上面這個代碼演示了如何通過生命周期函數調用方法來請求數據和更新數據。mounted函數會在組件被添加到DOM中后執行，我們可以在這個函數中調用獲取狀態的方法，將獲取到狀態更新到組件的數據中。

當按鈕被點擊時，我們還需要調用updateStatus方法，這個方法通過Axios庫向服務器發送post請求來更新button的狀態。我們在updateStatus方法中發送post請求，并使用then和catch方法來處理服務器返回的數據或錯誤。

通過以上代碼，我們可以了解Vue如何改變按鈕的狀態，并且能夠根據項目的要求靈活地添加其他操作。