【Vue.js】数字の計算をバインディングで表示させる

Vue.jsを使用して数字の計算をバインディングで表示させます。

やりたいことは以下です。

1.価格の初期値受け取り
2.セレクトボックスで個数変更
3.価格の変更

<div id="app">
<p>{{ a }}</p>
<select v-model="b">
<option disabled="disabled">選択してください</option>
<option value="1">1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
</select>
<p>小計：{{ sum }}</p>
<p>消費税：{{ tax }}</p>
<p>合計：{{ sum + tax }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    a: '4000',
    b: '1'
  },
  computed: {
    sum: function() {
      return this.a * this.b
    },
    tax: function() {
      return this.sum * 108 / 100 - this.sum
    } 
  }
})

See the Pen
mvPrZv by funclur (@funclur)
on CodePen.