გამოთვლადი თვისებები 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. შეამოწმეთ, რომ გამოთვლადი თვისებაც ამის შედეგად შეიცვლება.