Vue.js 在点击时切换类

Question

如何在 vue.js 中切换一个类？

我有以下内容：

 <th class="initial " v-on="click: myFilter">
    <span class="wkday">M</span>
</th>

new Vue({
  el: '#my-container',
  data: {},
  methods: {
    myFilter: function(){
      // some code to filter users
    }
  }
});

当我单击 <th> 标签时，我想应用 active 作为一个类，如下所示：

 <th class="initial active" v-on="click: myFilter">
    <span class="wkday">M</span>
</th>

这需要切换，即每次单击它时都需要添加/删除类。

原文由 adam78 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以让活动类依赖于布尔数据值：

 <th
  class="initial "
  v-on="click: myFilter"
  v-class="{active: isActive}">
  <span class="wkday">M</span>
</th>

new Vue({
  el: '#my-container',

  data: {
    isActive: false
  },

  methods: {
    myFilter: function() {
      this.isActive = !this.isActive;
      // some code to filter users
    }
  }
})

原文由 Douglas.Sesar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

无需方法：

 <!-- html element, will display'active' class if showMobile is true -->
<!-- clicking on the elment will toggle showMobileMenu to true and false alternatively -->
<div id="mobile-toggle"
  :class="{ active: showMobileMenu }"
  @click="showMobileMenu = !showMobileMenu">
</div>

vue.js app

 data: {
  showMobileMenu: false
}

原文由 moabi 发布，翻译遵循 CC BY-SA 4.0 许可协议