• 前記事: 05. 複数のinputに同じ変数を割り当てるとどうなるか
• 次記事: 07. 入力文字数をリアルタイムにプレビューする

06. 合計金額をリアルタイムに表示するには？

今回も双方向データバインディングの例です。表計算的な機能を簡単に実現できます。

サンプルコード

• Vue.jsバージョン: 2.5.2

サンプルコード03でご紹介したcomputedでメモ化すると、計算結果の表示を高速化できます。

    computed: {
      sum: function() { return this.a * this.b + this.c * this.d },
      tax: function() { return Math.ceil(this.sum * 0.08) },
    },

HTML側で{{sum + tax}}とインラインで式を書けるのもVue.jsのありがたい点です。表示にしか使わないような処理を書くときに便利です。

  <div class='text-right'>
    <p>  小計￥ {{sum}}</p>
    <p>消費税￥ {{tax}}</p>
    <p>  合計￥ {{sum + tax}}</p>
  </div>

Vue.jsでは、HTML側のテンプレート構文{{ }}を含むすべてのデータバインディングでJavaScript式を完全にサポートします（公式ドキュメント）。

宿題

上のサンプルでは数量をマイナスにできてしまいます。修正方法は？
解答例は次回に掲載します。

おまけ

Vue.jsロゴのカラーリングは一部地域でこちらへの連想を強く喚起することがあるようです。

• 前記事: 05. 複数のinputに同じ変数を割り当てるとどうなるか
• 次記事: 07. 入力文字数をリアルタイムにプレビューする

バックナンバー（Vue.jsサンプルコード）

Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
• Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
• Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
• Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
• Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
• Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
• Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
• Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
• Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
• Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
• Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
• Vue.jsサンプルコード（15）パスワードのマスクを解除する
• Vue.jsサンプルコード（16）パスワードを入力中だけ表示する