クリックすると 1 増えるようにする

参考コード

  • reactive な data に number を追加
  • 初期値は 0
  • button をクリックしたら addOne メソッドが実行されるように定義
  • addOne メソッドを追加する
  • this.number で reactive な data にアクセスできる
  • これを変更して、現在より 1 増やせばいい
App.vue
<template>
  <div id="app">
    <button @click="addOne">{{ number }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  methods: {
    addOne() {
      this.number = this.number + 1;
    }
  }
};
</script>

<style>
#app {
  font-size: 30px;
}
</style>