- IT Tips
- Ruby / Rails以外の開発一般
READ MORE
今回も双方向データバインディングの例です。表計算的な機能を簡単に実現できます。
サンプルコード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ロゴのカラーリングは一部地域でこちらへの連想を強く喚起することがあるようです。