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 свойствини ўзгартирадиган тугма ясангиз. Вычисляем свойство ҳам бу пайтда ўзгаришини текшеринг.