Vue.jsの内容からは少し逸れてしまいますが、JavaScriptやjQueryで普通に行っている処理、Vue.jsだとどういった記述になるのか。という内容でサンプルを作ってみました。

とあるボタンが有り、クリックされる毎にボタンのクラスが切り替わるという、至ってあるあるな処理ですが…それぞれのコードで再現してみたいと思います。

以下のようなHTMLを用意します。

<div id="test1">
  <a href="#" class="btn" v-bind:class="{is_active: active}" v-on:click="active = !active">ボタンです</a>
</div>

今回追加するクラスは「is_active」です。
また「v-」から始まる属性はVue.js用になりますね。

JavaScript

document.querySelector( '.btn' ).onclick = function(){
  this.classList.toggle( 'is_active' );
}

jQuery

$( function(){
  $( '.btn' ).click( function(){
    $( this ).toggleClass( 'is_active' );
  } );
} );

Vue.js

new Vue( {
  el: '#test1',
  data: {
    active: false
  }
} )

JavaScriptやjQueryの場合は「要素がクリックされたら、その要素のクラスを切り替える」という考え方ですが、Vue.jsの場合はまた考え方が少し違ってきます。
「active」という変数がtrueなのかfalseなのかという判定方法になります。初期値はfalseですので、ボタンにクラスは付いておりません。
例えば、Vue.js側のfalseという値を直接書き換えてリロードするとボタンにクラスが付いた状態になります。

コードを抜粋しながら解説していきます。
まず、ボタンにある以下の属性。

v-bind:class="{is_active: active}"

こちらはVue.jsによって制御されるクラス（HTML上では通常のクラスと何ら変わりない）になるのですが、意味合い的には…
:の左側「追加されるクラス」、:の右側「判定に使用する変数」という形になります。
これにより「activeという変数がtrueだった場合、is_activeというクラスが追加される」という処理になります。

お次は、以下の属性ですね。

v-on:click="active = !active"

こちらはクリック時の処理ですね。
「ボタンクリックでactiveという変数のtrue/falseを切り替える」という処理になります。
これにより、ボタンのクラスも切り替わるという訳ですね。

実際の挙動は、以下のボタンよりご確認ください。