Vue Watch para hacer una interacción dinámica

Vue.js es un marco de interfaz de usuario de JavaScript muy impresionante y reactivo que se utiliza para desarrollar sitios web de interfaz de usuario de forma rápida y sencilla. Esta publicación aprenderá sobre la propiedad del reloj, que es uno de los conceptos más fundamentales.

Vue.js proporciona una propiedad de observación para observar una variable, y en el cambio de esa variable, nos permite ejecutar una función para que podamos hacer Interacción dinámica. Probemos un ejemplo y tengamos alguna interacción dinámica usando la propiedad Vue Watch.

Ejemplo

Primero intentaremos cambiar alguna variable con el clic de un botón, y luego, usando la propiedad watch, observaremos esa variable y modificaremos alguna otra variable para hacer los cambios dinámicos en la página web.

Primero, suponga que tenemos dos variables.
datos()
regreso
buttonBool: verdadero,
color rojo"

Y hemos vinculado la variable "buttonBool" con un elemento de botón en la plantilla.

Queremos cambiar el color de fondo de, digamos, una división con solo hacer clic en el botón. Entonces, primero, crea un div en la plantilla.

Ahora, primero creemos una propiedad de reloj y cambiemos el estado de la variable "color" en el cambio de la variable "buttonBool".

mirar:
buttonBool ()
esto.color = !esto.color;

Bien! El último paso que queda es cambiar las clases del div en la variable de cambio de color. Entonces, hagámoslo usando la función de enlace de clases de Vue.js.

Aquí, acabo de asignar la clase "rojo" si el estado de la variable "color" es verdadero, de lo contrario, "verde" si el estado de la variable de color es "falso", y la clase "caja" está asignada en cualquier caso.

El CSS para dar el ancho, alto y color de fondo al div es el siguiente.

Muy bien, después de terminar con la codificación, mi página web sería así.

Ahora, cada vez que hago clic en el botón, el color de fondo del cuadro debería cambiarse.

Y puedes presenciar en el gif de arriba, el color del div está cambiando al hacer clic en el botón. Eso es asombroso, verdad!

Entonces, así es como podemos usar Vue Watch para hacer una interacción dinámica en la página web.

Conclusión

En esta publicación, hemos intentado cambiar el estado de alguna variable con el clic o el cambio de alguna otra variable usando la propiedad watch de Vue.js. También hemos realizado algunos cambios dinámicos en la página web. Hemos visto que al hacer clic en el botón, en el atributo al hacer clic, cambiamos el estado de la variable y mostramos que la propiedad del reloj observó la variable y realizó alguna acción como cambiar el estado de alguna otra variable.