Vue Watch for at skabe dynamisk interaktion

Vue.js er en meget imponerende og reaktiv JavaScript-front-end-ramme, der bruges til at udvikle front-end-websteder hurtigt og nemt. Dette indlæg vil lære om uregenskaben, der er et af de mest grundlæggende begreber.

Vue.js giver en uregenskab til at se en variabel, og ved ændringen af ​​denne variabel giver den os mulighed for at køre en funktion, så vi kan foretage dynamisk interaktion. Lad os prøve et eksempel og få en dynamisk interaktion ved hjælp af Vue Watch-ejendommen.

Eksempel

Vi vil først forsøge at ændre en variabel ved at klikke på en knap, og derefter bruge uregenskaben, vi vil se den variabel og ændre en anden variabel for at foretage de dynamiske ændringer på websiden.

Antag først, at vi har to variabler.
data()
Vend tilbage
buttonBool: sandt,
farve: "rød"

Og vi har bundet variablen “buttonBool” med et knapelement i skabelonen.

Vi ønsker at ændre baggrundsfarven på en, lad os sige, en division ved at klikke på knappen. Så først skal du oprette en div i skabelonen.

Lad os først oprette en uregenskab og ændre tilstanden for "farve" -variablen ved ændringen af ​​"buttonBool" -variablen.

holde øje:
buttonBool ()
det her.farve = !det her.farve;

I orden! Det sidste trin tilbage er at ændre klasserne i div på ændringen af ​​farvevariablen. Så lad os gøre det ved at bruge klassebindingsfunktionen i Vue.js.

Her har jeg lige tildelt klassen "rød", hvis tilstanden for "farve" -variablen er sand, ellers "grøn", hvis tilstanden for farvevariablen er "falsk", og "boks" -klassen tildeles under alle omstændigheder.

CSS til at give bredden, højden og baggrundsfarven til div er som følger.

Okay, efter at være færdig med de kodende ting, ville min webside være sådan.

Nu, når jeg klikker på knappen, skal baggrundsfarven på boksen ændres.

Og du kan vidne i gifen ovenfor, farven på div ændres ved at klikke på knappen. Det er fantastisk, ikke sandt!

Så det er sådan, vi kan bruge Vue Watch til at skabe dynamisk interaktion på websiden.

Konklusion

I dette indlæg har vi forsøgt at ændre en eller anden variabels tilstand ved klik eller ændring af en anden variabel ved hjælp af Vueegenskaben i Vue.js. Vi har også foretaget nogle dynamiske ændringer på websiden. Vi har set, at vi ved klik på knappen i attributten on-click ændrede variabelens tilstand og viste, at uregenskaben overvågede variablen og udførte en handling som at ændre en anden variabels tilstand.