Vue Watch for å lage dynamisk interaksjon

Vue.js er et veldig imponerende og reaktivt JavaScript-frontend-rammeverk 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 på en variabel, og ved 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 litt dynamisk interaksjon ved å bruke Vue Watch-egenskapen.

Eksempel

Vi vil først prøve å endre noen variabler ved å klikke på en knapp, og deretter bruke klokkeegenskapen, vil vi se den variabelen og endre noen andre variabler for å gjøre de dynamiske endringene på websiden.

Anta først at vi har to variabler.
data ()
komme tilbake
buttonBool: sant,
fargen rød"

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

Vi ønsker å endre bakgrunnsfargen på en, la oss si, en inndeling ved å klikke på knappen. Så opprett først en div i malen.

La oss først opprette en klokkeegenskap og endre tilstanden til "farge" -variabelen ved endring av "buttonBool" -variabelen.

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

Ok! Det siste trinnet igjen er å endre klassene til div på 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 bredden, høyden og bakgrunnsfargen til div er som følger.

Greit, etter å ha blitt ferdig med kodingen, ville websiden min vært slik.

Nå, når jeg klikker på knappen, bør bakgrunnsfargen på boksen endres.

Og du kan være vitne til i gifen ovenfor, fargen på div endres ved å klikke på knappen. Det er utrolig, ikke sant!

Så dette er hvordan vi kan bruke Vue Watch til å lage dynamisk interaksjon på nettsiden.

Konklusjon

I dette innlegget har vi prøvd å endre tilstanden til en variabel ved å klikke eller endre på en annen variabel ved å bruke klokkeegenskapen til Vue.js. Vi har også gjort noen dynamiske endringer på websiden. Vi har sett at ved å klikke på knappen, i attributtet på klikk, endret vi variabelens tilstand og viste at klokkeegenskapen så på variabelen og utførte noen handlinger som å endre tilstanden til en annen variabel.