v-on ディレクティブ
ディレクティブについての続きです。
v-on
v-onディレクティブを要素に追加することで、イベント処理を行うことができます。
構文
v-on:イベント名 = "メソッド名"
例
ボタンをクリックしたら現在時刻をページに表示します。
index.html
<div id="app">
<button v-on:click="onclick">
Click!
</button>
<p>
{{now}}
</p></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el: '#app',
data: {
now: ''
},
methods: {
onclick: function() {
this.now = new Date().toLocaleString();
}
}
})
ブラウザ(クリック後)
例２
メソッド名を直接指定する代わりに、インラインJavaScript式でメソッドを指定することもできます。
index.html
<div id="app">
<div id="example-3">
<button v-on:click="say('おはよ！！')">Say hi</button>
<button v-on:click="say('よろしく！！')">Say what</button>
</div></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
ブラウザ
