【Vue.js】イベントハンドリング:v-on

Vue.jsでイベント処理をしてみます。今回は、簡単にクリックしたときの処理を書きます。クリック以外のイベントも試してみると良いです。

v-on

HTML側は、v-on:イベント名="メソッド名"で指定します。JavaScript側は、Vueインスタンスのオプションオブジェクトのmethodsにメソッドを定義します。

<div id="app">
  <button v-on:click="up">Click me</button>
  <p>クリックした回数:{{counter}}回</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    up: function(){
      this.counter += 1;
    }
  }
});

ボタンをクリックすると下図のように数字が増えます。

ちなみにv-on:は、@に省略でき、以下のように書くことができます。

<button @click="up">Click me</button>

参考サイト

• イベントハンドリング — Vue.js