Beräknade egenskaper i Vue

Det är möjligt att definiera egenskaper som kommer att reaktivt beräknas baserat på andra egenskaper. Sådana egenskaper kallas beräknade. De placeras i inställningen computed.

Låt oss titta på ett exempel. Antag att egenskaperna lagrar användarens förnamn och efternamn:

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

Låt oss skapa en egenskap full som kommer att innehålla hela namnet med efternamn:

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

Låt oss visa innehållet i våra egenskaper i vyn:

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

Beräknade egenskaper ändras reaktivt. Det betyder att om vi ändrar förnamnet eller efternamnet, kommer vår egenskap full automatiskt reaktivt att ändras och vi kommer omedelbart att se förändringarna på skärmen.

Antag att egenskapen cost lagrar priset på en produkt, och egenskapen amount - antalet av dessa produkter. Skapa en beräknad egenskap price som kommer att innehålla den totala kostnaden för produkterna (pris multiplicerat med antal)

Skapa en knapp, klick på vilken kommer att ändra egenskapen cost. Kontrollera att den beräknade egenskapen också kommer att ändras vid detta.