Vue Watch pour créer une interaction dynamique

Vue.js est un framework frontal JavaScript très impressionnant et réactif utilisé pour développer des sites Web frontaux rapidement et facilement. Cet article en apprendra davantage sur la propriété de la montre qui est l'un des concepts les plus fondamentaux.

Vue.js fournit une propriété watch pour surveiller une variable, et lors du changement de cette variable, cela nous permet d'exécuter une fonction afin que nous puissions faire une interaction dynamique. Essayons un exemple et ayons une interaction dynamique en utilisant la propriété Vue Watch.

Exemple

Nous allons d'abord essayer de changer une variable en cliquant sur un bouton, puis en utilisant la propriété watch, nous allons regarder cette variable et modifier une autre variable pour apporter les modifications dynamiques sur la page Web.

Tout d'abord, supposons que nous ayons deux variables.
Les données()
revenir
buttonBool : vrai,
La couleur rouge"

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

Nous voulons changer la couleur de fond d'une, disons, une division au clic du bouton. Donc, tout d'abord, créez un div dans le modèle.

Maintenant, créons d'abord une propriété watch et changeons l'état de la variable "color" au changement de la variable "buttonBool".

Regardez:
boutonBool()
cette.couleur = !cette.Couleur;

Bien! La dernière étape restante est de changer les classes du div sur le changement de variable de couleur. Alors, faisons-le en utilisant la fonction de liaison de classe de Vue.js.

Ici, je viens d'affecter la classe "rouge" si l'état de la variable "couleur" est vrai, sinon "vert" si l'état de la variable couleur est "faux", et la classe "boîte" est affectée de toute façon.

Le CSS pour donner la largeur, la hauteur et la couleur d'arrière-plan au div est le suivant.

D'accord, après avoir terminé avec le codage, ma page Web ressemblerait à ceci.

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 du div change au clic du bouton. C'est incroyable, n'est-ce pas!

Voici donc comment nous pouvons utiliser Vue Watch pour créer une interaction dynamique sur la page Web.

Conclusion

Dans cet article, nous avons essayé de changer l'état de certaines variables en cliquant ou en changeant 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 du bouton, dans l'attribut au clic, nous avons changé l'état de la variable et montré que la propriété watch surveillait la variable et effectuait une action comme changer l'état d'une autre variable.