Vueの算出プロパティ

他のプロパティに基づいてリアクティブに計算されるプロパティを定義することができます。そのようなプロパティは算出プロパティと呼ばれます。それらはcomputedオプション内に配置されます。

例を見てみましょう。プロパティにユーザーの名前と姓が保存されているとします：

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

フルネーム（名前と姓）を含むfullプロパティを作成しましょう：

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

テンプレート内でプロパティの内容を表示してみましょう：

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

算出プロパティはリアクティブに変更されます。つまり、名前または姓を変更すると、fullプロパティも自動的にリアクティブに更新され、画面上ですぐに変更が反映されます。

costプロパティに製品の単価が、amountプロパティにその製品の数量が保存されているとします。製品の合計金額（単価×数量）を含む算出プロパティpriceを作成してください。

costプロパティを変更するボタンを作成してください。これにより算出プロパティも変更されることを確認してください。