Question

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

doc示例仅显示如何切换。

我有一个按钮，我点击该按钮，我想将课程改为：active toggle-on或toggle-off

我可以做＆＃34;活跃＆＃34;打开和关闭，但我似乎无法添加/删除第二类。

按钮如下所示：

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

我的数据：

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

但它仍然只适用于这两个。我如何申请＆＃34;切换＆＃34;相反？

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
    }
  }
}

Answer 2

也知道绑定时您可以将三元运算符传递给class属性。例如：

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

这只是免去了如上所述在对象中重复使用相同的布尔值的麻烦，尤其是当您需要将多个类绑定到每个状态时-像这样：

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

在Vuejs中切换两个类

2 个答案: