Beregnede egenskaper i Vue

Man kan definere egenskaper som vil bli reaktivt beregnet basert på andre egenskaper. Slike egenskaper kalles beregnede. De plasseres i innstillingen computed.

La oss se på et eksempel. Anta at egenskapene lagrer brukerens fornavn og etternavn:

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

La oss lage en egenskap full som vil inneholde fullt navn med etternavn:

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

La oss vise innholdet av våre egenskaper i presentasjonen:

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

Beregnede egenskaper endres reaktivt. Dette betyr at hvis vi endrer fornavn eller etternavn, vil vår egenskap full automatisk endres reaktivt og vi vil umiddelbart se endringene på skjermen.

Anta at egenskapen cost lagrer prisen på et produkt, og i egenskapen amount - antallet av disse produktene. Lag en beregnet egenskap price som vil inneholde den totale kostnaden for produktene (pris multiplisert med antall)

Lag en knapp, klikk på den som vil endre egenskapen cost. Kontroller at den beregnede egenskapen også endres når dette skjer.