ホーム

転職ドラフト(次回10/20)

VueのComputed算出プロパティを使う方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

Vue の Computed 算出プロパティを使う方法について書いていきます。

「算出プロパティって何やねん」と誰しもが最初は思うはずですが、僕的に一番分かりやすい説明をしたいと思います。

公式ドキュメントのこの辺の話です

目次

  1. Computed(算出プロパティ)とは?
  2. 使う方法

Computed(算出プロパティ)とは?

Computed(算出プロパティ)とは、「計算」や「文字の結合」をしたいときに使う便利なやつです。

確かに、Vue では template の中で計算させることは可能ですが、

テンプレートの中にロジック的なことを詰め込むと、読みづらくなります。

なので、計算や、文字の結合が必要なところは極力この Computed を使いましょう。というやつです。

使う方法

とても簡単な例で、a + b = c の c を表示するものを想定します。

<template>
    <div>{{ c }}</div>
</template>
<script>
export default {
    data() {
        return {
            a: 1,
            b: 2
        };
    },
    computed: {
        //cで出力したいのでcという名前にしている
        c: function() {
            //最終的にreturnしたやつが表示される
            return this.a + this.b;
        }
    }
}
</script>

このように、computed の中で、c という関数を作って return した内容を

テンプレート内で出力することができます。

つまり、c の関数内でめっちゃ長い記述を書いても、テンプレートの中は c で済むということですね。

別の例

例えば computed で長い処理を書くこともできます。

    computed: {
        c: function() {
            const ab = this.a * this.b;
            const ab2 = ab*ab;
            //最終的にreturnしたやつが表示される
            return ab2;
        }
    }

まとめ

以上、Vue の Computed の解説でした。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは!