【Vue】入門編(computed、this)

こんにちは。
本日はVue.js入門編です。

概要

算出プロパティ(computed)とは

以前紹介したMustacheで複雑なJavascript式を記述したりする場合、
コードが肥大化して見にくくなってしまいます。
そのような場合は、computedを使用します。

computedは依存している値が変更されると更新されるという仕組みを持ちます。
ちなみに、一度計算を行うと、依存している値が変更されない限り
キャッシュを返すようです。

computedはプロパティのため、参照時に()は不要です。

thisによる参照とは

Vueインスタンス自身。
thisを使って、プロパティを参照することができます。

サンプルソース

dataで渡された値を使用して
税抜価格と税込み価格を計算するサンプルです。

<div id="app">
<p>税抜価格：{{ excludingTax | adjustNumber }}</p>
<p>税込価格：{{ includeTax | adjustNumber }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price: 10000,
            num: 5
        },

        filters: {
            adjustNumber: function(value) {
                if (!value) {
                    return '0'
                }

                return value.toLocaleString()
            }
        },

        // 算出プロパティの定義
        computed: {
            // 税抜き価格の算出
            excludingTax: function() {
                // Vueインスタンスを参照してデータを取得
                return this.price * this.num
            },

            // 税込み価格の算出
            includeTax: function() {
                // Vueインスタンスを参照してデータを取得
                return this.price * this.num * 1.10
            }
        }
    });
</script>

以上です。