Vue.js
１ずつ増える カウントアップ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <h1>クリックしたらカウントアップするよ〜〜</h1> <div id="app"> <p>{{count}}回</p> <button v-on:click="countup">カウント！</button> </div> <script> new Vue({ el: '#app', data: { count: 0 }, methods: { countup: function() { this.count++; } } }) </script> </body> |
１ずつ増える カウントアップ （インライン記述）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <h1>クリックしたらカウントアップするよ〜〜</h1> <div id="app"> <p>{{count}}回</p> <button v-on:click="count++">カウント！</button> </div> <script> new Vue({ el: '#app', data: { count: 0 }, }) </script> </body> |
指定数ずつ増える カウントアップ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <h1>クリックしたらカウントアップするよ〜〜</h1> <div id="app"> <p>{{count}}回</p> <button v-on:click="countup">カウント！</button> </div> <script> new Vue({ el: '#app', data: { count: 0 }, methods: { countup: function() { this.count+=2; } } }) </script> </body> |
