Vue.js/日記003
ボタンをクリック
WEBの特性でもあるインタラクティブな部分はVue.jsではどう記述するのかなと思ったら、メソッドを規定しておいて、操作対象の要素に必要なメソッドを紐づければいいようでした。
<div id="app">
<p>{{ count }}</p>
<button v-on:click="countUp">count up</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
countUp: function () {
this.count++
}
}
})
el,dataに続いて登場したのがmethodsでここに各種イベント処理を書いておくことができるようです。それをボタンのクリックであればbutton要素にv-on:click属性をつけて必要なメソッドと紐づけるという書き方です。サンプルではメソッドの中のthisがVueインスタンスを表しているので、this.count++ としてボタンが押される度にcountデータが一つ増えるようにしてみました。もちろんデータはViewにバインディングされているので押す度に表示されている数字も一つずつ増えていきます。
Last-Modified