在Vue中，定義一個Boolean變量非常簡單。Vue在JavaScript中實現了一種特殊的響應式系統，它是通過將數據和UI綁定在一起來實現這一目的的。這個響應式系統會在數據發生變化時自動更新UI。

//定義Boolean變量
data() {
return {
isActive: false
}
}

在上面的代碼片段中，我們定義了一個Boolean變量isActive并將其設置為false。我們可以將它添加到Vue的data選項中，這樣Vue就知道它應該監視這個變量了。

接下來，我們需要在我們的代碼中使用這個變量。假設我們有一個按鈕，我們想根據isActive的值來更新按鈕的樣式。我們可以使用v-bind指令將其綁定到按鈕的class屬性上。

按鈕

在上面的代碼片段中，我們使用了v-bind:class指令將按鈕的class屬性綁定到isActive變量。這意味著當isActive為true時，按鈕將有一個名為“active”的CSS類，否則它將沒有這個類。

最后，我們需要為這個變量添加一些邏輯。讓我們假設我們想在按鈕被點擊時將isActive的值切換為相反的布爾值。我們可以使用v-on指令來監聽按鈕的click事件，并調用一個方法來處理這個事件。

按鈕

methods: {
toggleActive() {
this.isActive = !this.isActive
}
}

在上面的代碼片段中，我們使用了v-on:click指令來監聽按鈕的click事件，并將其綁定到名為“toggleActive”的方法上。當按鈕被點擊時，這個方法將被調用。在這個方法中，我們只是將isActive變量的值切換為相反的布爾值。

現在，我們已經成功地定義了一個Boolean變量，并將其用于更新UI以及在點擊事件中切換其值。這是Vue的一個基本但非常重要的功能，它為我們提供了一種簡單的方式來管理我們的數據并將其與用戶界面進行綁定。