Vue Watch pentru a face interacțiune dinamică

Vue.js este un cadru front-end JavaScript foarte impresionant și reactiv folosit pentru a dezvolta site-uri web front-end rapid și ușor. Această postare va afla despre proprietatea ceasului care este unul dintre cele mai fundamentale concepte.

Vue.js oferă o proprietate de ceas pentru a viziona o variabilă și, la schimbarea acelei variabile, ne permite să rulăm o funcție, astfel încât să putem face interacțiune dinamică. Să încercăm un exemplu și să avem o interacțiune dinamică folosind proprietatea Vue Watch.

Exemplu

Mai întâi vom încerca să schimbăm o variabilă printr-un clic pe un buton, iar apoi folosind proprietatea ceas, vom urmări acea variabilă și vom modifica o altă variabilă pentru a face modificările dinamice pe pagina web.

În primul rând, presupunem că avem două variabile.
date()
întoarcere
buttonBool: adevărat,
culoarea rosie"

Și am legat variabila „buttonBool” cu un element buton în șablon.

Vrem să schimbăm culoarea de fundal a unei divizii, să zicem, printr-un clic pe buton. Deci, mai întâi, creați un div în șablon.

Acum, să creăm mai întâi o proprietate de ceas și să schimbăm starea variabilei „culoare” la schimbarea variabilei „buttonBool”.

ceas:
buttonBool ()
acest.culoare = !acest.culoare;

Bine! Ultimul pas rămas este modificarea claselor divului pe schimbarea variabilei de culoare. Deci, să facem asta folosind caracteristica de legare a clasei Vue.js.

Aici, tocmai am atribuit clasa „roșu” dacă starea variabilei „culoare” este adevărată, altfel „verde” dacă starea variabilei de culoare este „falsă”, iar clasa „casetă” este atribuită în orice caz.

CSS pentru a da lățimea, înălțimea și culoarea de fundal divului este după cum urmează.

În regulă, după ce am terminat cu codificarea, pagina mea web ar fi așa.

Acum, ori de câte ori fac clic pe buton, culoarea de fundal a casetei ar trebui modificată.

Și puteți vedea în giful de mai sus, culoarea divului se schimbă la un clic pe buton. E uimitor, corect!

Deci, iată cum putem folosi Vue Watch pentru a face interacțiune dinamică pe pagina web.

Concluzie

În această postare, am încercat să schimbăm starea unei variabile la clic sau la schimbarea altei variabile folosind proprietatea ceasului Vue.js. De asemenea, am făcut câteva modificări dinamice la pagina web. Am văzut că la apăsarea butonului, în atributul on-click, am schimbat starea variabilei și am arătat că proprietatea ceas a urmărit variabila și a efectuat o acțiune cum ar fi schimbarea stării altei variabile.