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 қасиетін өзгертетін батырманы жасаңыз. Сонда есептелетін қасиеттің де өзгеретінін тексеріңіз.