Vue.JS er et veldig imponerende og reaktivt JavaScripts front-end-ramme som brukes til å utvikle front-end nettsteder raskt og enkelt. Dette innlegget vil lære om klokkeegenskapen som er et av de mest grunnleggende konseptene.

Vue.JS gir en klokkeegenskap for å se en variabel, og på endring av den variabelen lar den oss kjøre en funksjon slik at vi kan lage dynamisk interaksjon. La oss prøve et eksempel og ha noe dynamisk samspill ved hjelp av Vue Watch -egenskapen.

Eksempel

Vi vil først prøve å endre litt variabel med et klikk på en knapp, og deretter bruke Watch -egenskapen, vil vi se den variabelen og endre en annen variabel for å gjøre de dynamiske endringene på websiden.

Først, antar at vi har to variabler.
data ()
komme tilbake
ButtonBool: True,
fargen rød"

Og vi har bundet "ButtonBool" -variabelen med et knappelement i malen.

Vi ønsker å endre bakgrunnsfargen på A, la oss si, en divisjon med et klikk på knappen. Så for det første, lag en div i malen.

Dette er en testside

Klikk på meg!

La oss først lage en klokkeegenskap og endre tilstanden til "farge" -variabelen ved endringen av "Buttonbool" -variabelen.

se:
buttonbool ()
dette.farge = !dette.farge;

Ok! Det siste trinnet som er igjen er å endre klassene til diven om endring av fargevariabel. Så la oss gjøre det ved å bruke klassebindingsfunksjonen til Vue.JS.

Her har jeg nettopp tildelt klassen "rød" hvis tilstanden til "farge" -variabelen er sann, ellers "grønn" hvis tilstanden til fargevariabelen er "falsk" og "boksen" -klassen er tildelt i alle fall.

CSS for å gi bredde, høyde og bakgrunnsfarge til Div er som følger.

OK, etter å ha blitt ferdig med koding ting, ville websiden min være slik.

Nå, når jeg klikker på knappen, skal bakgrunnsfargen på boksen bli endret.

Og du kan være vitne til i GIF over, fargen på Div endrer seg ved å klikke på knappen. Det er utrolig, riktig!

Så det er slik vi kan bruke Vue Watch til å lage dynamisk samhandling på nettsiden.

Konklusjon

I dette innlegget har vi prøvd å endre en variabel tilstand med klikk eller endring av en annen variabel ved hjelp av VUEs klokkeegenskap.JS. Vi har også gjort noen dynamiske endringer på websiden. Vi har sett at vi ved et klikk på knappen, i klikkattributtet, endret variabelenes tilstand og vist at Watch-egenskapen så på variabelen og utførte noen handlinger som å endre en annen variabel's tilstand.