Vue.JS est un cadre frontal de JavaScript très impressionnant et réactif utilisé rapidement et facilement. Ce message se rendra compte de la propriété Watch qui est l'un des concepts les plus fondamentaux.

Vue.JS fournit une propriété de montre pour regarder une variable, et sur le changement de cette variable, il nous permet d'exécuter une fonction afin que nous puissions faire une interaction dynamique. Essayons un exemple et ayez une interaction dynamique en utilisant la propriété Vue Watch.

Exemple

Nous essaierons d'abord de modifier une variable en cliquant sur un bouton, puis en utilisant la propriété Watch, nous surveillerons cette variable et modifierons une autre variable pour apporter les modifications dynamiques sur la page Web.

Tout d'abord, supposons que nous avons deux variables.
données()
retour
Buttonbool: vrai,
La couleur rouge"

Et nous avons lié la variable "Buttonbool" avec un élément de bouton dans le modèle.

Nous voulons modifier la couleur d'arrière-plan d'un, disons, une division au clic sur le bouton. Donc, tout d'abord, créez une div dans le modèle.

Ceci est une page de test

Cliquez sur moi!

Maintenant, créons d'abord une propriété de surveillance et modifions l'état de la variable «couleur» au changement de la variable «Buttonbool».

montre:
Buttonbool ()
ce.couleur = !ce.couleur;

Bien! La dernière étape à gauche consiste à modifier les classes de la div sur le changement de variable de couleur. Alors, faisons cela en utilisant la fonction de liaison de classe de Vue.js.

Ici, je viens d'attribuer la classe «rouge» si l'état de la variable «couleur» est vrai, sinon «vert» si l'état de la variable de couleur est «faux» et que la classe «Box» est attribuée dans tous les cas.

Le CSS pour donner la largeur, la hauteur et la couleur d'arrière-plan de la div sont les suivants.

D'accord, après avoir terminé avec les trucs de codage, ma page Web serait comme ça.

Maintenant, chaque fois que je clique sur le bouton, la couleur d'arrière-plan de la boîte doit être modifiée.

Et vous pouvez être témoin dans le GIF ci-dessus, la couleur de la div change au clic sur le bouton. C'est incroyable, c'est vrai!

C'est donc ainsi que nous pouvons utiliser la montre Vue pour faire une interaction dynamique sur la page Web.

Conclusion

Dans cet article, nous avons essayé de modifier l'état d'une variable au clic ou à la modification d'une autre variable en utilisant la propriété Watch de Vue.js. Nous avons également apporté des modifications dynamiques à la page Web. Nous avons vu qu'au clic sur le bouton, dans l'attribut en clic, nous avons changé l'état de la variable et montré que la propriété Watch a regardé la variable et effectué une action comme modifier l'état d'une autre variable.