Vue.JS es un marco front-end muy impresionante y reactivo de JavaScript utilizado para desarrollar sitios web front-end rápida y fácilmente. Esta publicación aprenderá sobre la propiedad del reloj que es uno de los conceptos más fundamentales.

Vue.JS proporciona una propiedad de reloj para ver una variable, y en el cambio de esa variable, nos permite ejecutar una función para que podamos hacer una interacción dinámica. Intentemos un ejemplo y tengamos una interacción dinámica utilizando la propiedad Vue Watch.

Ejemplo

Primero intentaremos cambiar una variable con el clic de un botón, y luego, utilizando la propiedad Watch, veremos esa variable y alteraremos alguna otra variable para realizar los cambios dinámicos en la página web.

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

Y hemos atado la variable "Buttonbool" con un elemento de botón en la plantilla.

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

Esta es una página de prueba

Haz click en mi!

Ahora, primero creemos una propiedad de reloj y cambiemos el estado de la variable "color" a la variable "Buttonbool".

mirar:
buttonbool ()
este.color = !este.color;

Está bien! El último paso restante es cambiar las clases del DIV en la variable de cambio de color. Entonces, hagamos eso utilizando la función de enlace de clase 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 "casilla" se asigna en cualquier caso.

El CSS para dar el ancho, la altura y el color de fondo al Div es el siguiente.

Muy bien, después de terminar con las cosas de 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 cambiar.

Y puede presenciar en el gif arriba, el color del div está cambiando con el clic del botón. Eso es asombroso, correcto!

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

Conclusión

En esta publicación, hemos intentado cambiar el estado de algunas variables con el clic o el cambio de alguna otra variable utilizando la propiedad de reloj 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 en el clic, cambiamos el estado de la variable y mostramos que la propiedad de reloj observaba la variable y realizó alguna acción como cambiar el estado de otra variable de otra variable.