Vue.JS Watch Property

Vue.JS er et veldig kraftig og reaktivt JavaScript-rammeverk, som brukes til å bygge brukergrensesnitt (brukergrensesnitt) og spa (en-siders applikasjoner). Det er bygget ved å kombinere de beste funksjonene fra allerede eksisterende kantete og reagere rammer. Utviklere elsker også å kode eller bygge applikasjoner i den.

Vue.JS gir klokkeegenskapen for å observere og reagere på variablene eller dataendringen. Vi kan bruke Watch -egenskapen til å manipulere DOM når den vikte variabelen blir endret. I denne artikkelen skal vi se på hvordan vi kan bruke Watch -eiendom, og utføre de ønskede oppgavene om endring av variabel. Så la oss komme i gang.

Seere

EN Watcher i vue.JS fungerer som en hendelseslytter til en variabel eller eiendom. Det brukes til å utføre flere oppgaver om endring av noen spesifikke eiendommer. Det kommer godt med mens du gjør asynkrone oppgaver.

La oss demonstrere og forstå begrepet Watcher ved å vurdere et eksempel.

Eksempel:

Anta at vi bygger et e-handelsnettsted, der vi har en liste over elementer, og vi bygger det handlekurv eller kassekomponent. I den komponenten må vi beregne mengden av et enkelt element angående antall elementer.

For det første antar vi noen egenskaper i dataene.

data ()
komme tilbake
ItemName: "Element 1",
Itemquantity: NULL,
itemPrice: 200,
TotalPrice: 0

,

Der vi vil se egenskapen "Itemquantity" og beregne totalprisen. Vi vil først gjøre databindingene i malen,

Før du skriver koden for å se på variabelen og beregne totalprisen.

Etter å ha skrevet denne koden, vil vi ha vår webside som denne:

Nå ønsker vi å endre totalprisen på endring av "itemequantity" som når brukeren endrer mengden ved hjelp av inngangsfeltet. Den totale prisen skal endres. For det formålet må vi se "itemequantity" og beregne totalprisen når egenskapen "Itemquantity" blir endret.

Så, seer for "itemequantity" ville være slik:

se:
itemQuantity ()
dette.TotalPrice = dette.itemequantity * dette.itemprice;
konsoll.Logg (dette.itemequantity);

Nå, når brukeren endrer "itemequantity", vil totalprisen bli endret om et øyeblikk. Vi trenger ikke å bekymre oss for noe, lenger. Watch -egenskapen vil ta seg av denne beregningen nå.

La oss se på websiden:

Og la oss prøve å øke eller endre mengden og se noen resultater:

Hvis vi endrer mengden, la oss si “4”, vil totalprisen være “800”:

Tilsvarende, hvis vi endrer mengden til "7", vil totalprisen være "1400":

Så det er slik Watch Property fungerer og hjelper til med reaktiv utvikling. Reaktivitet er en slags signatur av vue.JS. Også Watch -eiendommen kommer godt med mens du utfører asynkrone operasjoner.

Konklusjon

I denne artikkelen har vi lært hva som er en klokkeegenskap og hvordan vi kan bruke den i vue.JS. Vi har også prøvd et ekte eksempel for å forstå dets sanne implementering. Dette hjelper mye med å spare tid og få fart på utviklingsprosessen. Vi håper at du fant denne artikkelen nyttig og fortsetter å besøke Linuxhint.com for bedre forståelse.