Phenquestions
Vlastnosť Computed sa zvyčajne používa na výpočet údajov z niektorých ďalších údajov. Je známy svojou reaktivitou, pretože kedykoľvek sa zmení premenná obsiahnutá v nejakej vypočítanej vlastnosti, celá vlastnosť sa prepočíta znova.Tento príspevok sa naučí odovzdať parameter vypočítanej vlastnosti a zistí, ako používať Vue vypočítané s parameter. Predtým, ako začneme s odovzdávaním parametrov do vypočítanej vlastnosti, najskôr si pochopíme vypočítané vlastnosti v príklade.
Príklady
Predpokladajme, že v našej súčasti Vue máme dve premenné s menom „firstName“ a „lastName“:
//…data ()
návrat
krstné meno: "",
priezvisko: ""
,
//…
Vypočítaná vlastnosť
Chceme vypočítať vlastnosť „fullName“, ktorá bude kombinovať „firstName“ a „lastName“ a prepočítať fullName vždy, keď sa zmení ktorákoľvek z dvoch premenných „firstName“ a „lastName“. Vypočítaná vlastnosť na výpočet celého názvu by teda bola taká:
//…vypočítané:
celé meno()
vráť toto.firstName + "+ toto.priezvisko;
//…
Teraz poďme vytvoriť niektoré vstupné polia a spojiť premenné „firstName“ a „lastName“ so vstupnými poľami a tiež spojiť vlastnosť „fullName“ v značke „p“, aby sme videli okamžitú zmenu pri zmene prvého anime posledného názov. Časť HTML tohto komponentu bude vyzerať takto:
Dobre! Po vykonaní tohto nastavenia sa pozrime na našu webovú stránku.
Ak ste správne napísali správny kód a spustili ho, mali by ste mať na svojej webovej stránke tiež dve vstupné polia. Skúsme zadať meno a priezvisko a uvidíme, či sa vlastnosť „fulName“ vypočíta alebo nie.
Na vyššie uvedenej snímke obrazovky môžete byť svedkami úžasnej reaktivity aplikácie Vue.js pomocou vypočítanej vlastnosti. Môžete tiež byť svedkami toho, že to nie je ako sledovať jednu premennú a meniť hodnotu inej premennej. Stále sleduje každú premennú zahrnutú vo vypočítanej vlastnosti a prepočítava „priezvisko“. Pozrime sa, ako môžeme preniesť parametre do vypočítanej vlastnosti a použiť ju.
Predajte parametre vypočítanej vlastnosti
Na odovzdanie parametrov do vypočítanej vlastnosti odovzdáme parametre rovnako ako pri funkcii. Napríklad v šablóne, keď máme viazanú premennú „lastName“, chceme odovzdať nejaký reťazec, takže šablónová časť našej súčasti bude vyzerať takto:
Teraz vo vypočítanej vlastnosti možno odovzdaný parameter využiť pomocou nasledujúcej syntaxe.
vypočítané:celé meno()
návratová správa1 =>
vrátiť '$ message $ toto.firstName $ toto.priezvisko'
Takto môžeme preniesť parameter do vypočítaného a dostať ho do vlastnosti a použiť ho.
Ak sa znovu pozrieme na našu webovú stránku a zadáme meno a priezvisko, môžete mať rovnakú funkčnosť a reaktivitu, tentokrát však parameter prešiel.
Takto jednoduché a ľahké je odovzdať vypočítaný parameter vlastnosti a použiť ho.
Záver:
Vypočítaná vlastnosť je veľmi výkonnou vlastnosťou programu Vue.js, a dozvedeli sme sa, že sa hodí, keď ich musíme zmeniť, keď sa zmenia ich závislosti. Naučili sme sa odovzdať parameter a použiť ho vo vypočítanej vlastnosti.
