【Nuxt.js】インプットした２つの値を足して表示する方法【基礎】

computedを使ってみたかったので学習がてらメモ

template部分

ポイントは２つ
・input type="number"
・v-model.number=""
例えばこんな風に

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">
    <p>{{ c }}</p>
  </div>
</template>

script部分

ポイントは二つ
・バインディングする為にdataプロパティを定義する
・computedで計算するメソッドを作る

export default {
  data () {
    return {
      a: 0,
      b: 0,
    }
  },
  computed: {
    c () {
      return this.a + this.b
    }
  },
}

こうすることで、入力した数値をリアルタイムで計算して表示できる
また、input typeをtextかつv-modelで入力されたテキストをつなげて表示することができる