Vue.JS Warunkowe renderowanie
Vue.JS to łatwa do nauczenia się i przystępna biblioteka, którą możemy zacząć budować w niej aplikacje internetowe z podstawową wiedzą na temat tworzenia stron internetowych. W Vue.JS, programiści uwielbiają kodować i czuć wolność podczas opracowywania aplikacji.
W każdej dynamicznej aplikacji internetowej renderowanie warunkowe jest niezbędną częścią. Vue.JS zapewnia różne sposoby warunkowego renderowania i możemy użyć dowolnego z następujących sposobów, które pasują do naszego celu:
- V-show
- v-if
- V-Else
W tym artykule wypróbujemy te dyrektywy dostarczone przez Vue.JS dla warunkowego renderowania i zrozumienia ich w lepszy sposób.
V-show
S-show ukrywa element tylko poprzez wyłączenie jego widoczności. Ukrywa element, jeśli wartość przekazanego wyrażenia lub zmiennej nie jest prawdą.
Na przykład:
Ten akapit nie jest ukryty
Ten akapit jest ukryty
v-if
Z drugiej strony V-IF nie ukrywa elementu, ale nie renderuje niczego, dopóki wartość przekazanego wyrażenia lub zmiennej nie stanie się prawdziwa.
Na przykład:
To jest akapit
Istnieje dodatkowa funkcja w dyrektywie V-IF w porównaniu z dyrektywą V-Show. Możemy zastosować go również do bloku szablonu, jeśli nie chcemy renderować niczego między tym blokiem. Albo istnieje element dziecięcy w tym lub wiele innych elementów.
Na przykład:
To jest nagłówek
To jest akapit
V-Else
Możemy również użyć dyrektywy V-ELSE wraz z instrukcją V-IF w celu warunkowego renderowania między dowolnym z dwóch bloków. Ale pamiętaj, że blok V-Else musi pojawić się zaraz po bloku V-IF.
Na przykład:
Niniejszy akapit uczyni, jeśli „Isvar” stanie się prawdziwy
W przeciwnym razie ten akapit zostanie renderowany.
Możemy również zastosować V-Else na bloku szablonu.
To jest nagłówek
To jest akapit
V-ELSE-IF
Podobnie jak V-ELSE, możemy również użyć dyrektywy V-ELSE-IF wraz z dyrektywą V-IF.
Na przykład:
Samochód
Książka
Zwierzę
Żaden z Ablove
V-if vs. V-show
V-IF i V-show wykonują to samo zadanie. Oboje ukrywają elementy w DOM w oparciu o prawdę lub falistą wartość przekazanego wyrażenia, ale z subtelną różnicą ukrywania się i nie renderowania elementów.
Jeśli porównamy koszty czasu i przetwarzania między tymi dwoma. V-IF kosztuje więcej w czasie wykonywania lub przełączaniu, podczas gdy V-show kosztuje więcej na początku renderowania. Tak więc rozsądnie byłoby używać V-show, gdy przełączanie jest celem. W przeciwnym razie V-IF jest preferowany.
Owinięcie
W tym artykule nauczyliśmy się, jak warunkowo renderować DOM w Vue.JS za pomocą dyrektyw V-IF i V-ELSE. Pokazaliśmy kilka przykładów i dowiedzieliśmy się o prawdziwej różnicy między S-Show a dyrektywą V-IF. Jeśli ten artykuł pomoże ci lepiej zrozumieć i pojęcia, odwiedzaj Linuxhint.com dla tak przydatnych treści.