Հաշվարկվող հատկությունները 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 հատկությունը: Ստուգեք, որ հաշվարկվող հատկությունը նույնպես կփոխվի դրա արդյունքում: