Vue Watch för att skapa dynamisk interaktion

Vue.js är ett mycket imponerande och reaktivt JavaScript-frontramverk som används för att snabbt och enkelt utveckla front-end-webbplatser. Detta inlägg kommer att lära sig mer om klockfastigheten som är ett av de mest grundläggande begreppen.

Vue.js tillhandahåller en klockegenskap för att titta på en variabel, och vid förändringen av den variabeln låter den oss köra en funktion så att vi kan göra dynamisk interaktion. Låt oss prova ett exempel och ha en dynamisk interaktion med Vue Watch-egenskapen.

Exempel

Vi kommer först att försöka ändra någon variabel med ett klick på en knapp, och sedan använda klockegenskapen kommer vi att titta på den variabeln och ändra någon annan variabel för att göra de dynamiska ändringarna på webbsidan.

Antag först att vi har två variabler.
data ()
lämna tillbaka
buttonBool: sant,
färgen röd"

Och vi har bundit variabeln "buttonBool" med ett knappelement i mallen.

Vi vill ändra bakgrundsfärgen på en, låt oss säga, en uppdelning genom att klicka på knappen. Så, först, skapa en div i mallen.

Låt oss först skapa en klockegenskap och ändra tillståndet för variabeln "färg" vid ändringen av "buttonBool" -variabeln.

Kolla på:
buttonBool ()
detta.färg = !detta.Färg;

OK! Det sista steget kvar är att ändra div-klasserna på färgändringen. Så, låt oss göra det genom att använda klassbindningsfunktionen i Vue.js.

Här har jag just tilldelat klassen "röd" om variabeln "färg" är sant, annars "grön" om färgvariabelns tillstånd är "falskt" och "rutan" -klassen tilldelas i alla fall.

CSS för att ge bredden, höjden och bakgrundsfärgen till div är som följer.

Okej, efter att ha klarat mig med de kodande grejerna skulle min webbsida vara så här.

När jag klickar på knappen bör rutans bakgrundsfärg ändras.

Och du kan bevittna i gifen ovan, färgen på div förändras genom att klicka på knappen. Det är fantastiskt, eller hur!

Så det här är hur vi kan använda Vue Watch för att skapa dynamisk interaktion på webbsidan.

Slutsats

I det här inlägget har vi försökt ändra vissa variabelns tillstånd vid klick eller ändring av någon annan variabel med hjälp av klockegenskapen i Vue.js. Vi har också gjort några dynamiska ändringar på webbsidan. Vi har sett att genom att klicka på knappen, i attributet klick, ändrade vi variabelns tillstånd och visade att klockegenskapen såg på variabeln och utförde en åtgärd som att ändra någon annan variabel.