Vue.js alternar clase al hacer clic

Sin la necesidad de un método:

// html element
<div id="mobile-toggle"
 v-bind:class="{ active: showMobileMenu }"
 v-on:click="showMobileMenu = !showMobileMenu">
</div>

//in your vue.js app
data: {
    showMobileMenu: false
}

Esta respuesta es relevante para Vue.js version 2

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

El resto de la respuesta de Douglas sigue siendo aplicable (configurando la nueva instancia de Vue con isActive: false, etc.).

Documentos relevantes: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax y https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

Además de la respuesta de NateW, si tiene guiones en el nombre de su clase css, debe envolver esa clase entre comillas (simples):

<th 
  class="initial " 
  v-on:click="myFilter"
  v-bind:class="{ 'is-active' : isActive}"
>

 <span class="wkday">M</span>
 </th>

Ver este tema para más sobre el tema.

Si necesita más de 1 clase

Puedes hacer esto:

<i id="icon" 
  v-bind:class="{ 'fa fa-star': showStar }"
  v-on:click="showStar = !showStar"
  >
</i> 

data: {
  showStar: true
}

Observe las comillas simples ' alrededor de las clases!

Gracias a las soluciones de todos los demás.

Este ejemplo está usando Listas: Al hacer clic en algunos li se vuelve rojo

Html:

`<div id="app">
  <ul>
    <li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>   
  </ul>
</div>`

JS:

`var app = new Vue({
  el:"#app",
  data:{
    lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});`

Css

`ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}`

Violín:

Https://jsfiddle.net/w37vLL68/158 /

Tengo una solución que le permite verificar los diferentes valores de un prop y, por lo tanto, los diferentes elementos <th> se volverán activos/inactivos. Usando la sintaxis de vue 2.

<th 
class="initial " 
@click.stop.prevent="myFilter('M')"
:class="[(activeDay == 'M' ? 'active' : '')]">
<span class="wkday">M</span>
</th>
...
<th 
class="initial " 
@click.stop.prevent="myFilter('T')"
:class="[(activeDay == 'T' ? 'active' : '')]">
<span class="wkday">T</span>
</th>



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

  data: {
      activeDay: 'M'
  },

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

Si no necesita acceder al conmutador desde fuera del elemento, este código funciona sin una variable de datos:

<a @click="e => e.target.classList.toggle('active')"></a>