在Vue中，狀態顯示按鈕是一個很常見的組件。它可以讓用戶了解一個狀態是否被選中或被激活，同時還可以讓用戶改變這個狀態。在這篇文章中，我們將詳細介紹如何使用Vue來實現一個狀態顯示按鈕。

首先，我們需要定義一個單獨的組件來處理狀態顯示按鈕。在Vue中，組件可以封裝HTML元素、CSS樣式和JavaScript代碼，使代碼更加模塊化和易于維護。

Vue.component('status-button', {
template: '{{ label }}',
props: {
label: {
type: String,
default: 'Button'
},
isActive: {
type: Boolean,
default: false
}
},
methods: {
toggleStatus() {
this.isActive = !this.isActive;
this.$emit('status-changed', this.isActive);
}
}
});

上面的代碼定義了一個名為status-button的Vue組件。它有兩個屬性：label表示按鈕的文本內容（默認為“Button”），isActive表示按鈕的狀態（默認為false，即未選中）。

組件的模板使用了Vue的綁定語法:class和@click，分別來控制按鈕的樣式和行為。當按鈕處于選中狀態時，會添加一個名為active的CSS類。當按鈕被點擊時，會調用組件定義的toggleStatus方法，并向父組件發送一個名為status-changed的事件，同時傳遞當前按鈕的狀態。

在父組件中使用status-button時，需要傳遞isActive屬性和一個自定義的label屬性。另外，上面的代碼還使用了Vue的綁定語法v-model，來實現雙向數據綁定。

最后，我們需要在父組件中監聽status-changed事件，并在回調函數中更新組件的isActive屬性。

new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
onStatusChanged(isActive) {
this.isActive = isActive;
}
}
});

上面的代碼實例化了一個Vue應用，并定義了一個isActive屬性用于保存按鈕的狀態。它還定義了一個名為onStatusChanged的方法，用于在status-changed事件觸發時更新isActive屬性。

通過以上的代碼，我們可以輕松地實現一個狀態顯示按鈕，并讓它與父組件實現雙向數據綁定。這個簡單的組件可以應用于各種場景，如開關按鈕、單選按鈕等。