Vue'da Hesaplanan Özellikler

Diğer özelliklere dayalı olarak reaktif bir şekilde hesaplanacak özellikler tanımlayabilirsiniz. Bu tür özelliklere hesaplanan özellikler denir. computed ayarında bulunurlar.

Bir örnekle inceleyelim. Özelliklerde kullanıcının adı ve soyadı saklansın:

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

full özelliğini yapalım, bu özellik tam adı ve soyadı içerecek:

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

Özelliklerimizin içeriğini template'te gösterelim:

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

Hesaplanan özellikler reaktif olarak değişir. Bu şu anlama gelir: eğer adı veya soyadı değiştirirsek, full özelliğimiz de otomatik olarak reaktif bir şekilde değişecek ve değişiklikleri ekranda hemen göreceğiz.

cost özelliğinde bir ürünün fiyatı, amount özelliğinde ise bu ürünlerin miktarı saklansın. Hesaplanan price özelliğini yapın, bu ürünlerin toplam değerini (fiyat çarpı miktar) içersin.

cost özelliğini değiştiren bir buton yapın. Butona tıklandığında hesaplanan özelliğin de bu sırada değiştiğini kontrol edin.