Ҳисобкунакӣ хосиятҳо дар 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-ро тағйир диҳад. Санҷед, ки хосияти ҳисобкунакӣ низ дар ин вақт тағйир хоҳад ёфт.