Propriétés calculées dans Vue

Il est possible de définir des propriétés qui seront calculées de manière réactive sur la base d'autres propriétés. Ces propriétés sont appelées calculées. Elles se situent dans l'option computed.

Regardons un exemple. Supposons que les propriétés stockent le prénom et le nom de l'utilisateur :

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

Créons une propriété full, qui contiendra le nom complet avec le nom de famille :

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

Affichons dans le template le contenu de nos propriétés :

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

Les propriétés calculées changent de manière réactive. Cela signifie que si nous modifions le prénom ou le nom, alors notre propriété full changera automatiquement de manière réactive et nous verrons immédiatement les changements à l'écran.

Supposons que la propriété cost stocke le prix du produit, et que la propriété amount stocke la quantité de ces produits. Créez une propriété calculée price, qui contiendra le coût total des produits (prix multiplié par la quantité)

Créez un bouton, dont le clic modifiera la propriété cost. Vérifiez que la propriété calculée changera également lors de cette modification.