切换 Vuejs 中的两个类

Question

我已经尝试了几个小时才能在 Vue JS 中添加/删除两个类。

文档示例仅显示如何切换一个。

我有一个按钮，单击该按钮我想将类更改为：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
    }
  }
}