Vue.JS è un framework front-end di JavaScript molto impressionante e reattivo utilizzato per sviluppare siti Web front-end rapidamente e facilmente. Questo post imparerà la proprietà dell'orologio che è uno dei concetti più fondamentali.

Vue.JS fornisce una proprietà di orologi per guardare una variabile e, sul cambiamento di quella variabile, ci consente di eseguire una funzione in modo da poter fare un'interazione dinamica. Proviamo un esempio e facciamo qualche interazione dinamica usando la proprietà Vue Watch.

Esempio

Prima proveremo a modificare alcune variabili al clic di un pulsante, quindi utilizzando la proprietà dell'orologio, guarderemo quella variabile e modificheremo qualche altra variabile per apportare le modifiche dinamiche sulla pagina web.

Innanzitutto, supponiamo che abbiamo due variabili.
dati()
ritorno
Buttonbool: vero,
colore rosso"

E abbiamo definito la variabile "bottonbool" con un elemento pulsante nel modello.

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

Questa è una pagina di test

Cliccami!

Ora, creiamo per la prima volta una proprietà di orologi e cambiamo lo stato della variabile "colore" alla modifica della variabile "bottonbool".

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

Bene! L'ultimo passo a sinistra è cambiare le classi del div sul cambiamento di colore variabile. Quindi, facciamolo usando la funzione di legame di classe di Vue.js.

Qui, ho appena assegnato la classe "rossa" se lo stato della variabile "colore" è vero, altrimenti "verde" se lo stato della variabile di colore è "falso" e la classe "box" è assegnata in ogni caso.

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

Va bene, dopo essere stato fatto con le cose di codifica, la mia pagina web sarebbe così.

Ora, ogni volta che faccio clic sul pulsante, il colore di sfondo della casella dovrebbe essere modificato.

E puoi testimoniare nella gif sopra, il colore del div sta cambiando al clic del pulsante. È fantastico, giusto!

Quindi, è così che possiamo usare Vue Watch per fare un'interazione dinamica sulla pagina web.

Conclusione

In questo post, abbiamo provato a modificare lo stato di una variabile al clic o alla modifica di qualche altra variabile utilizzando la proprietà dell'orologio di Vue.js. Abbiamo anche apportato alcune modifiche dinamiche alla pagina web. Abbiamo visto che al clic del pulsante, nell'attributo On-Click, abbiamo modificato lo stato della variabile e abbiamo mostrato che la proprietà dell'orologio guardava la variabile e eseguiva alcune azioni come cambiare lo stato di qualche altra variabile.