Vue.jsのmethodsプロパティ

Vue.jsのリアクティブを実感してみます」でなんとなくVue.jsを触ってみました。

今回はVueコンポーネントにあるmethodsプロパティを使用してみます。

イベントハンドラ(v-onディレクティブ)という機能を使用してmethodsプロパティで定義したメソッドを呼び出してみます。(検知)

とするとmethodsプロパティで定義したメソッドが動作します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
{{name}}:{{age}}歳<br>
<button v-on:click='plus'>足す</button>
<button v-on:click='minus'>引く</button>
</div>
<script src="https://jp.vuejs.org/js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'ogura',
age: 53
},
methods: {
plus: function() {
console.log(1);
this.age = this.age + 1;
},
minus: function() {
console.log(-1);
this.age = this.age – 1;
}
}
});
</script>
</body>
</html>

view raw
gistfile1.txt
hosted with ❤ by GitHub

buttonタグにv-onディレクティブを設定しています。ちなみにelは#appなのでdivタグ内にbuttonタグがないとv-onディレクティブは動作しませんのでご注意ください。(当たり前ですが…)

以下動作例です。

Vue.jsのmethodsプロパティ

Vue.jsのmethodsプロパティ

次回はmustache(マスタッシュ)にバインドしたデータを加工するVue.filterについて勉強します!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA