Apskaičiuojamos savybės Vue

Galima nustatyti savybes, kurios būtų reaktyviai apskaičiuojamos remiantis kitomis savybėmis. Tokios savybės vadinamos apskaičiuojamomis. Jos yra nustatymo computed dalyje.

Pažiūrėkime pavyzdžiu. Tegu savybėse saugomas vartotojo vardas ir pavardė:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Sukurkime savybę full, kuri contain the full name with surname:

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

Atvaizduokime šablonose mūsų savybių turinį:

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

Apskaičiuojamos savybės keičiasi reaktyviai. Tai reiškia, kad jei pakeisime vardą ar pavardę, tai mūsų savybė full automatiškai reaktyviai pasikeis ir mes iš karto pamatysime pakitimus ekrane.

Tegu savybėje cost saugoma produkto kaina, o savybėje amount - kiekis tų produktų. Sukurkite apskaičiuojamą savybę price, kuri contain the total produktų vertę (kaina padauginta iš kiekio)

Sukurkite mygtuką, kurio paspaudimas pakeistų savybę cost. Patikrinkite, kad apskaičiuojama savybė taip pat keistųsi tuo pačiu metu.