在 Vuejs 中切换两个类

Posted 2023-02-22

【中文标题】在 Vuejs 中切换两个类

【英文标题】：Toggle of TWO classes in 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”？

【参考方案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>