計算されるプロパティについて

  • 2 分

ハンドルバー構文 ({{ }}) を使用すると、値を表示し、JavaScript を HTML に挿入できます。 この構文は強力ですが、コードの混乱や繰り返しを引き起こすおそれがあります。 Vue では、計算されるプロパティを使用して、計算やその他の形式の動的な文字列をオフロードできます。

計算されるプロパティを作成する

メソッドが methods の下に追加されるのと同様に、計算されるプロパティは computed フィールドに追加されます。 "計算されるプロパティ" は、値を返す関数です。 メソッドと同様に、this を使用することにより、計算されるプロパティはアクティブなインスタンスにアクセスできます。

計算されるプロパティを使用して、firstName と lastName を fullName プロパティとして結合する、配列を検索して適切な値を返すなどの動的なタスクを実行できます。

さらに、計算されるプロパティは、"リアクティブ" です。 計算されるプロパティの値が変更されると、計算されるプロパティは、変更を反映するように更新されます。

fullName を作成する例を次に示します。

const app = Vue.createApp({
    data() {
        return {
            firstName: 'Cheryl',
            lastName: 'Smith'
        }
    },
    computed: {
        fullName() {
            return `${this.lastName}, ${this.firstName}`
        }
    },
});

文字列リテラルは、lastName フィールドと firstName フィールドを連結します。