【Vue.js】算出プロパティの使い方

今日の記事では、算出プロパティの使い方を紹介します。

v-modelを使うと、入力された値を管理できることは前回学びました。

しかし、入力された値を表示することだけはできますが、計算ができません。

何かしらの計算を行うには、算出プロパティというものを使います。

以下のサイトが作ってみたものです。

上記のように数値を受け付けるフォームを作ります。

入力された数値の合計値を計算し、Totalの箇所に表示します。

数値が変化するに連れて、Totalの値も連動して変化します。

Vue.jsを使うことで、ユーザの入力に連動して動くダイナミック、動的なサイトが作れます。

表示用のテンプレートはこんな感じのコードです。

<!--コンポーネントのテンプレート-->
{% raw %}
<script type="text/x-template" id="fuga-template">
    <div>
        <div class="alert alert-info h5">
            Total: {{ total }}
        </div>
        <div class="form-group">
            <label for="num">Number:</label>
            <input type="number" class="form-control"
            id="num" name="num" v-model="num">
        </div>
    </div>
</script>
{% endraw %}

数値を入力するフォームに、v-modelを使っているところがポイントです。

数値の合計値をtotalとして表示しています。

次に算出プロパティを使う箇所を見ていきます。

<!--コンポーネントのスクリプト-->
<script>
Vue.component('fuga', {
    template: '#fuga-template',
    data: function(){
        return {
         num:0
          };
    },
    computed:{
        total: function(){
            var fe = 0;
            for (var i = 1; i <= this.num; i++){
                fe = fe + i;
            }
            return fe;
        }
    }
});

computed:になっているのが算出プロパティを定義している場所です。

計算した値をtotalという名前でテンプレートに渡すようにしています。

おわり。