title: Vue.js toggle class on click
body: <p>How does toggle a class in vue.js?</p>
  <p>I have the following:</p>
  <pre><code>&lt;th class=&quot;initial &quot; v-on=&quot;click: myFilter&quot;&gt;
      &lt;span class=&quot;wkday&quot;&gt;M&lt;/span&gt;
  &lt;/th&gt;
  
  new Vue({
    el: '#my-container',
    data: {},
    methods: {
      myFilter: function(){
        // some code to filter users
      }
    }
  });
  </code></pre>
  <p>When I click <code>&lt;th&gt;</code> tag I want to apply <code>active</code> as a class as follows:</p>
  <pre><code>&lt;th class=&quot;initial active&quot; v-on=&quot;click: myFilter&quot;&gt;
      &lt;span class=&quot;wkday&quot;&gt;M&lt;/span&gt;
  &lt;/th&gt;      
  </code></pre>
  <p>This needs to toggle i.e. each time its clicked it needs to add/remove the class.</p>