在 Vuejs 中切换两个类答案

【问题标题】：Toggle of TWO classes in Vuejs在 Vuejs 中切换两个类
【发布时间】：2017-11-20 12:02:10
【问题描述】：

我已经尝试了几个小时才能在 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
  }
})

但它仍然只适用于这两个。如何反向应用“toggle-off”？

【问题讨论】：

标签： vue.js

【解决方案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
    }
  }
}

【讨论】：

【解决方案2】：

还要知道，您可以在绑定时将三元运算符传递给类属性。例如：

<i :class="['fa', isHappy ? 'fa-smile' : 'fa-frown']"></i>

这只是避免了如上所述在对象中重复使用相同的布尔值，特别是如果您需要将多个类绑定到每个状态 - 就像这样：

<i :class="['fa', isHappy ? 'fa-smile active' : 'fa-frown']"></i>

【讨论】：