Propriétés calculées

Il est possible de faire des expressions de base dans un template Vue. 

Par exemple, afin de convertir une devise en une autre 💵:

{ { amount * 0.8 } } Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Bien que ces expressions soient pratiques, elles ne sont destinées qu'aux opérations simples, car elles peuvent rapidement porter à confusion:

• Pourquoi ce montant est-il multiplié par 0.8?
• Quelle devise tente-t-on d'afficher?

Heureusement, les propriétés calculées permettent d'éviter de complexifier inutilement les templates HTML en permettant de retirer toute expression logique de ceux-ci.

Par exemple, la donnée suivante 👇 exprime clairement que l'information affichée correspond à un montant converti en dollars américains 🇺🇸. Aucune expression mathématique ne vient polluer le template:

{ { amountToUSD } } Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Pour obtenir une donnée propre comme celle-ci, sans expression, il faut ajouter un objet intitulé computed à l'app Vue. Cet objet contient à son tour différentes propriétés. Chacune de ces propriétés se base sur une ou plusieurs données se trouvant dans data et leur appliquent un traitement quelconque.

Par exemple, multiplier une donnée par 0.8.

computed: { amountToUSD() { return this.amount * 0.8; } }

La grande force des propriétés calculées est qu'elles surveillent en permanence les données sur lesquelles elles se basent. Ainsi, si l'une de ces données vient à changer, par exemple le montant, le résultat de la propriété calculé se mettra automatiquement à jour en se basant sur la valeur de celle-ci.

Par exemple, la valeur en dollars américains se met automatiquement à jour lorsque le montant en dollars canadien change, puisqu'il s'agit d'une propriété calculée.

Propriétés calculées

EXERCICE Vue - Luchador Vous devrez rendre dynamique à l’aide de Vue le tableau indicateur d’un match de la NBA