frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【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.