Vue.jsのタグに対するイベントは「v-on」を使います。
今回は、ボタンがクリックされた時に関数を実行してみましょう！
スクリプト（Vue.js クリックで関数を実行させるサンプル（v-on、methods））
|
1 2 3 4 5 6 7 8 9 10 11 |
var app5 = new Vue({ el: '#app-5', data: { message: '好きなくだものは何ですか？' }, methods: { messageChange: function (fruit) { this.message=fruit; } } }) |
「message」という変数を用意して、その値が変更される関数を作りましょう。
[ 6行目〜10行目 ]
ここが関数の本体ですね。
「methods」というオブジェクトを用意して、その中に関数を書いていきます。
「messageChange」という関数を作り、渡された引数の内容で「message」の中を書き換えます。
HTML（Vue.js クリックで関数を実行させるサンプル（v-on、methods））
|
1 2 3 4 5 6 |
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="messageChange('りんご！')">「りんご」が好き</button> <button v-on:click="messageChange('さくらんぼ！')">「さくらんぼ」が好き</button> <button v-on:click="messageChange('ばなな！')">「ばなな」が好き</button> </div> |
buttonタグの中に「v-on:click=”messageChange(引数)”」と書けばOKです。
これだけでボタンがクリックされた時に「messageChange」関数が実行されます。
直感的にスッキリ書けますね。
実際に作ってみると分かりやすいと思います。
サンプルも作ってます。
See the Pen Vue.js クリックで関数を実行させるサンプル（v-on、methods） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
