Vue CLI のサンプル （整数の加算、減算）

Vue CLI　のサンプルです。次のようなページを作成します。
整数の加算、減算をします。

src/App.vue

<template>
  <div>
      {{value_aa}}
<input type="text" v-model="value_aa">
<p />
      {{value_bb}}
<input type="text" v-model="value_bb">
<p />
和 {{wa}}<p />
差 {{sa}}</p>
<button @click="calculation()">計算</button>
<button @click="clear()">クリア</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value_aa: 0,
      value_bb: 0,
	wa: 0,
	sa: 0,
    }
  },
  methods: {
    calculation () {
      this.wa = parseInt(this.value_aa) + parseInt(this.value_bb)
      this.sa = parseInt(this.value_aa) - parseInt(this.value_bb)
    },
    clear () {
      this.value_aa = 0
      this.value_bb = 0
      this.wa = 0
      this.sa = 0
    }
  }
}
</script>

src/App.vue の使い方はこちら
Vue CLI の簡単な使い方