新要素 Computed

参考コード

  • Reactive Data に何らかの計算を加えた値を返す Reactive な変数を追加できる
  • computed プロパティに、メソッドとして定義する
  • そのメソッドは reactive data　に計算を加えた値を返すようにする
  • reactive data へはいつも通り this で参照する
Vue.app
<template>
  <div id="app">
    <h2>{{ number }} {{ double }}</h2>
    <button @click="add(1);">+1</button> <button @click="add(10);">+10</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  computed: {
    double() {
      return this.number * 2;
    }
  },
  methods: {
    add(val) {
      this.number = this.number + val;
    }
  }
};
</script>