Vue calculée avec paramètre

La propriété calculée est généralement utilisée pour calculer les données à partir de certaines autres données. Il est connu pour sa réactivité car chaque fois qu'une variable impliquée dans une propriété calculée est modifiée, toute la propriété est recomputée.Ce message apprendra à passer le paramètre à la propriété calculée et à voir comment utiliser Vue calculé avec paramètre. Avant de commencer à passer des paramètres à la propriété calculée, comprenons d'abord les propriétés calculées en passant par l'exemple.

Exemples

Supposons que nous ayons deux variables nommées «FirstName» et «LastName» dans notre composante Vue:

//…
données()
retourner
prénom: "",
nom de famille: ""

,
//…

Propriété calculée

Nous voulons calculer une propriété «FullName» qui combinera le «premier nom» et «LastName» et recomputer le nom complet chaque fois que l'une des deux variables «Firstname» et «LastName» se modifie. Ainsi, la propriété calculée pour calculer le nom complet serait comme ceci:

//…
calculé:
nom et prénom()
retourner ceci.FirstName + "+ ceci.nom de famille;


//…

Créons maintenant certains champs d'entrée et lions les variables «FirstName» et «LastName» aux champs d'entrée et lier également la propriété «FullName» dans la balise «P» pour afficher le changement instantané sur le changement du premier anime du dernier nom. La partie HTML de ce composant sera comme ceci:

Bien! Après avoir eu toute cette configuration, jetons un coup d'œil à notre page Web.

Si vous avez réussi à rédiger le code correct et à l'exécuter, vous devriez également avoir les deux champs d'entrée sur votre page Web. Essayons de taper le prénom et le nom de famille et voyons la propriété «Fulname» est calculée ou non.

Ici, dans la capture d'écran donnée ci-dessus, vous pouvez assister à la merveilleuse réactivité de Vue.js utilisant la propriété calculée. Vous pouvez également voir que ce n'est pas comme regarder une seule variable et modifier la valeur d'une autre variable. Pourtant, il regarde chaque variable incluse dans la propriété calculée et recommandant le «LastName». Voyons comment nous pouvons transmettre des paramètres à la propriété calculée et l'utiliser.

Passer les paramètres à la propriété calculée

Pour passer les paramètres à la propriété calculée, nous passons simplement les paramètres comme nous le faisons pour la fonction. Par exemple, dans le modèle, lorsque nous avons lié la variable «LastName», nous voulons passer une chaîne, donc la partie modèle de notre composant serait comme ceci:

Maintenant, dans la propriété calculée, le paramètre passé peut être utilisé en utilisant la syntaxe suivante.

calculé:
nom et prénom()
return message1 =>
return '$ message $ ceci.FirstName $ ceci.nom de famille'

C'est ainsi que nous pouvons transmettre un paramètre au calculé et l'obtenir dans la propriété et l'utiliser.

Si nous regardons à nouveau notre page Web et tapons le prénom et le nom de famille, vous pouvez avoir les mêmes fonctionnalités et réactivité, mais cette fois, le paramètre a passé.

C'est à quel point il est simple et facile de passer un paramètre de propriété calculé et de l'utiliser.

Conclusion:

La propriété calculée est une caractéristique très puissante de Vue.JS, et nous avons appris que cela est utile lorsque nous devons les changer lorsque leurs dépendances sont modifiées. Nous avons appris à passer le paramètre et à l'utiliser dans la propriété calculée.