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 } } })