Vue.js 单击时切换类 [英] Vue.js toggle class on click

问题描述

vue.js 中如何切换类?

How does toggle a class in 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
    }
  }
});

当我点击 标签时，我想应用 active 作为一个类，如下所示:

When I click <th> tag I want to apply active as a class as follows:

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

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

This needs to toggle i.e. each time its clicked it needs to add/remove the class.

推荐答案

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

You could have the active class be dependent upon a boolean data value:

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

这篇关于Vue.js 单击时切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！