Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(06)合計金額をリアルタイムに表示する

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ロゴのカラーリングは一部地域でこちらへの連想を強く喚起することがあるようです。


バックナンバー(Vue.jsサンプルコード)

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

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。