单击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>

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

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