算出プロパティ(computed)を使った計算のサンプルコード

算出プロパティ(computed)を使った計算のサンプルコードです。

データが変更されると自動で算出してくれるので便利です。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

code.ameneko.com

サンプルコード

<template>
    <div class="computed-data">
        <p>a + b = {{computedData}}</p>
        <p>数字を変更すると計算結果が変わります。</p>
        <p>aの数字を入力：<input v-model="a" type="text"></p>
        <p>bの数字を入力：<input v-model="b" type="text"></p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            a: 10,
            b: 20,
        }
    },
    computed:{
        computedData(){
            return Number(this.a) + Number(this.b);
        }
    }
}
</script>

<style scoped>
p{
    padding-bottom:20px;
}
</style>

解説

算出プロパティ(computed)は、テンプレート内のデータを計算したり判断したりするのに便利です。

このサンプルでは、a + b の計算結果を表示します。

v-modelによって数字を変更すると計算結果が変わります。

*JavascriptのNumber()で数字に変換してます。数字以外を入れると「NaN」が返ってくるので注意