Vue obliczone z parametrem

Obliczona właściwość jest zwykle używana do obliczania danych z niektórych innych danych. Jest znany z reaktywności, ponieważ za każdym razem, gdy zmienna zaangażowana w jakąś obliczoną właściwość zostanie zmieniona, cała właściwość zostanie ponownie obliczona.Ten post nauczy się przekazywać parametr do właściwości obliczonej i zobaczyć, jak korzystać z Vue obliczone z parametr. Zanim zacznij od przekazania parametrów do obliczonej właściwości, najpierw zrozummy obliczone właściwości, przechodząc przez przykład.

Przykłady

Załóżmy, że mamy dwie zmienne o nazwie „FirstName” i „LastName” w naszym komponencie Vue:

//…
dane()
powrót
imię: "",
nazwisko: ""

,
//…

Obliczona właściwość

Chcemy obliczyć właściwość „Pełna nazwa”, która połączy „nazwę FirstName” i „LastName” i ponownie obliczyć nazwę Pełną, ilekroć zmienia się każda z dwóch zmiennych „nazwa pierwszej” i „LastName”. Tak więc obliczona właściwość obliczania pełnej nazwy byłaby taka:

//…
obliczone:
FullName ()
Zwróć to.FirstName + " + to.nazwisko;


//…

Teraz utwórzmy niektóre pola wejściowe i powiązaj zmienne „FirstName” i „LastName” do pól wejściowych, a także powiązaj właściwość „Pełna nazwa” w znaczniku „P”, aby zobaczyć natychmiastową zmianę zmiany pierwszego anime ostatnie nazwa. Część HTML tego komponentu będzie taka:

W porządku! Po całej tej konfiguracji spójrzmy na naszą stronę internetową.

Jeśli pomyślnie napisałeś prawidłowy kod i uruchom go, powinieneś również mieć dwa pola wejściowe na swojej stronie internetowej. Spróbujmy wpisać imię i nazwisko i zobaczmy, że właściwość „FulName” zostanie obliczona, czy nie.

Tutaj, na podanym powyżej zrzucie ekranu, możesz być świadkiem cudownej reaktywności Vue.JS za pomocą obliczonej właściwości. Możesz także być świadkiem, że to nie jest jak oglądanie jednej zmiennej i zmiana wartości innej zmiennej. Mimo to obserwuje każdą zmienną zawartą w obliczonej właściwości i ponownie obliczając „LastName”. Zobaczmy, jak możemy przekazać parametry do obliczonej właściwości i użyć.

Przejdź parametry do obliczonej właściwości

W celu przekazania parametrów do właściwości obliczonej, po prostu przekazujemy parametry, tak jak dla funkcji. Na przykład w szablonie, kiedy wiązamy zmienną „LastName”, chcemy przekazać jakiś ciąg, więc część szablonu naszego komponentu byłaby taka:

Teraz, we właściwości obliczonej, przekazany parametr można wykorzystać za pomocą następującej składni.

obliczone:
FullName ()
return Message1 =>
return '$ wiadomość $ to.FirstName $ to.nazwisko'

W ten sposób możemy przekazać parametr obliczonego i uzyskać go w właściwości i użyć go.

Jeśli ponownie spojrzymy na naszą stronę internetową i wpiszmy imię i nazwisko, możesz mieć tę samą funkcjonalność i reaktywność, ale tym razem parametr przekazał.

Tak proste i łatwe jest przekazanie obliczonej właściwości i użycie go.

Wniosek:

Obliczona właściwość jest bardzo potężną cechą Vue.JS, i dowiedzieliśmy się, że przydaje się to, gdy musimy je zmienić, gdy ich zależności się zmieniają. Nauczyliśmy się przekazywać parametr i używać go w obliczonej właściwości.