Vue beregnet med parameter

Den beregnede egenskapen brukes vanligvis til å beregne data fra noen andre data. Det er kjent for sin reaktivitet, fordi når en variabel involvert i noen beregnet eiendom blir endret, blir hele eiendommen på nytt på nytt.Dette innlegget vil lære å overføre parameteren til beregnet eiendom og se hvordan du bruker Vue beregnet med parameter. Før vi kommer i gang med å passere parametere til den beregnede egenskapen, la oss først forstå de beregnede egenskapene ved å gå gjennom eksemplet.

Eksempler

Anta at vi har to variabler som heter “FirstName” og “LastName” i VUE -komponenten vår:

// ..
data()
komme tilbake
fornavn: "",
etternavn: ""

,
// ..

Beregnet eiendom

Vi ønsker å beregne en "fullnavn" -egenskap som vil kombinere "FirstName" og "LastName" og beregne fullnavnet når noen av de to variablene "FirstName" og "LastName" blir endret. Så den beregnede egenskapen for beregning av hele navnet ville være slik:

// ..
beregnet:
fullt navn()
Returner dette.FirstName + " + dette.etternavn;


// ..

La oss nå lage noen inngangsfelt og binde "FirstName" og "Lastname" -variablene til inngangsfeltene og også binde egenskapen "Fullnavn" i "P" -taggen for å se øyeblikkelig endring på endringen av den første anime av sist Navn. HTML -delen av denne komponenten vil være slik:

Ok! Etter å ha hatt alt dette oppsettet, la oss se på websiden vår.

Hvis du har skrevet riktig kode og kjører den, bør du også ha de to inndatafeltene på websiden din. La oss prøve å skrive inn fornavnet og etternavnet og se enten "fulname" -egenskapen blir beregnet eller ikke.

Her i skjermbildet gitt ovenfor, kan du være vitne til den fantastiske reaktiviteten til Vue.JS ved hjelp av den beregnede egenskapen. Du kan også vitne. Likevel ser det på hver variabel som er inkludert i den beregnede egenskapen og beregner "etternavnet" på nytt ". La oss se hvordan vi kan overføre parametere til den beregnede egenskapen og bruke den.

Passer parametere til den beregnede egenskapen

For å sende parametrene til den beregnede egenskapen, passerer vi bare parametrene som vi gjør for funksjonen. For eksempel, i malen, når vi har bundet variabelen "etternavn", vil vi passere en streng, så malen delen av komponenten vår vil være slik:

Nå, i den beregnede egenskapen, kan den passerte parameteren brukes ved hjelp av følgende syntaks.

beregnet:
fullt navn()
return Message1 =>
return '$ melding $ dette.FirstName $ dette.etternavn'

Slik kan vi overføre en parameter til beregnet og få den i eiendommen og bruke den.

Hvis vi igjen ser på websiden vår og skriver ut fornavnet og etternavnet, kan du ha samme funksjonalitet og reaktivitet, men denne gangen passerte parameteren.

Dette er hvor enkelt og enkelt det er å passere en beregnet eiendomsparameter og bruke den.

Konklusjon:

Den beregnede egenskapen er et veldig kraftig trekk ved Vue.JS, og vi har lært at det kommer til nytte når vi må endre dem når deres avhengigheter blir endret. Vi har lært å passere parameteren og bruke den i den beregnede egenskapen.