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

vue

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

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

実際のサンプルはこちら

サンプルコード

<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」が返ってくるので注意

コメント

タイトルとURLをコピーしました