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 касиетин өзгөртө турган баскычты жасаңыз. Эсептелүүчү касиет ошол учурда өзгөрө турганын текшериңиз.