Vue Watch per creare interazioni dinamiche

Vue.js è un framework front-end JavaScript molto impressionante e reattivo utilizzato per sviluppare siti Web front-end in modo rapido e semplice. Questo post imparerà a conoscere la proprietà dell'orologio che è uno dei concetti più fondamentali.

Vue.js fornisce una proprietà watch per guardare una variabile e, al cambio di quella variabile, ci consente di eseguire una funzione in modo da poter creare un'interazione dinamica. Proviamo un esempio e abbiamo un po' di interazione dinamica usando la proprietà Vue Watch.

Esempio

Cercheremo prima di cambiare qualche variabile con il clic di un pulsante, e poi usando la proprietà watch, guarderemo quella variabile e altereremo qualche altra variabile per apportare le modifiche dinamiche sulla pagina web.

Innanzitutto, supponiamo di avere due variabili.
dati()
ritorno
buttonBool: vero,
colore rosso"

E abbiamo associato la variabile "buttonBool" con un elemento pulsante nel modello.

Vogliamo cambiare il colore di sfondo di una, diciamo, divisione con un clic del pulsante. Quindi, per prima cosa, crea un div nel modello.

Ora creiamo prima una proprietà watch e cambiamo lo stato della variabile “color” al cambio della variabile “buttonBool”.

orologio:
buttonBool()
Questo.colore = !Questo.colore;

Tutto a posto! L'ultimo passaggio rimasto è quello di cambiare le classi del div al cambio di variabile di colore. Quindi, facciamolo usando la funzione di associazione di classe di Vue.js.

Qui ho appena assegnato la classe “red” se lo stato della variabile “color” è true, altrimenti “green” se lo stato della variabile color è “false”, e la classe “box” è assegnata comunque.

Il CSS per dare la larghezza, l'altezza e il colore di sfondo al div è il seguente.

Bene, dopo aver finito con la codifica, la mia pagina web sarebbe così like.

Ora, ogni volta che clicco sul pulsante, il colore di sfondo della casella dovrebbe cambiare.

E puoi testimoniare nella gif sopra, il colore del div sta cambiando con un clic del pulsante. È fantastico, vero?!

Quindi, ecco come possiamo usare Vue Watch per creare un'interazione dinamica sulla pagina web web.

Conclusione

In questo post, abbiamo provato a cambiare lo stato di alcune variabili al clic o cambiare qualche altra variabile utilizzando la proprietà watch di Vue.js. Abbiamo anche apportato alcune modifiche dinamiche alla pagina web. Abbiamo visto che al clic del pulsante, nell'attributo on-click, abbiamo cambiato lo stato della variabile e mostrato che la proprietà watch osservava la variabile ed eseguiva alcune azioni come cambiare lo stato di qualche altra variabile.