Berekende eienskappe in Vue

Jy kan eienskappe instel wat reaktief bereken sal word op grond van ander eienskappe. Sulke eienskappe word bereken genoem. Hulle word in die opsie computed geplaas.

Kom ons kyk na 'n voorbeeld. Laat die voornaam en van van die gebruiker in die data stoor:

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

Kom ons maak 'n eienskap full wat die volle naam sal bevat:

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

Kom ons toon die inhoud van ons eienskappe in die templaat:

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

Berekende eienskappe verander reaktief. Dit beteken dat as ons die voornaam of van verander, dan sal ons eienskap full outomaties reaktief verander en ons sal die veranderinge dadelik op die skerm sien.

Laat die eienskap cost die prys van die produk stoor, en die eienskap amount - die hoeveelheid van hierdie produkte. Maak 'n berekende eienskap price wat die volle koste van die produkte sal bevat (prys vermenigvuldig met hoeveelheid)

Maak 'n knoppie, 'n klik daarop sal die eienskap cost verander. Toets dat die berekende eienskap ook sal verander.