Vuejs中的兩個類的切換

Question

我試了幾個小時才能在Vue JS中添加/刪除兩個類。

doc示例只顯示如何切換一個。

我有一個按鈕，我點擊我想改變類之一：active toggle-on或toggle-off

我能做的開啓和關閉的「活躍」，但我似乎無法能夠添加/刪除第二課。

的按鈕看起來是這樣的：

<button v-on:click="toggleOnTop" id="toggleTopButton" v-bind:class="toggleActive"></button> 

而且我的數據：

data:() => ({ 
    toggleActive: { 
    active: true, 
    'toggle-on': true 
    } 
}) 

但它仍然只適用於這兩種。我怎樣才能反向應用「切換」？

Answer 1

您可能需要使用一個計算的屬性或對象語法對於這一點，可以說你的方法切換您的數據的布爾：

data() { 
    return { 
    isActive: false 
    } 
} 
methods: { 
    toggleOnTop() { 
    this.isActive = !this.isActive 
    } 
} 

縮寫形式是添加下面的類綁定：

< ... v-bind:class="{'active toggle-on': isActive, 'toggle-off': !isActive}"> 

另一種方法是使用一個計算的屬性，將設置類，只要你想：

computed: { 
    toggleActive() { 
    return { 
     'active': this.isActive, 
     'toggle-on': this.isActive, 
     'toggle-off': !this.isActive 
    } 
    } 
}