Vue.js to łatwa do nauczenia i przystępna biblioteka, w której możemy zacząć budować aplikacje internetowe z podstawową wiedzą z zakresu tworzenia stron internetowych. W Vue.js, programiści uwielbiają kodować i czuć swobodę podczas tworzenia aplikacji.

W każdej dynamicznej aplikacji internetowej renderowanie warunkowe jest niezbędną częścią. Vue.js zapewnia różne sposoby renderowania warunkowego i możemy użyć dowolnego z następujących sposobów, które odpowiadają naszym celom:

• v-pokaż
• v-jeśli
• v-inny

W tym artykule wypróbujemy te dyrektywy dostarczone przez Vue.js do renderowania warunkowego i lepszego ich zrozumienia.

v-pokaż

V-show ukrywa tylko element, wyłączając jego widoczność. Ukrywa element, jeśli wartość przekazanego wyrażenia lub zmiennej nie jest prawdziwa.

Na przykład:

Ten akapit nie jest ukryty

Ten akapit jest ukryty

v-jeśli

Z drugiej strony, v-if nie ukrywa elementu, ale również nie renderuje niczego, dopóki wartość przekazanego wyrażenia lub zmiennej nie stanie się prawdziwa.

Na przykład:

W dyrektywie v-if jest dodatkowa funkcja w porównaniu z dyrektywą v-show. Możemy zastosować go również do bloku szablonu, jeśli nie chcemy renderować niczego pomiędzy tym blokiem. Albo jest w tym komponent podrzędny, albo wiele innych elementów.

Na przykład:

v-inny

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. Pamiętaj jednak, że blok v-else musi pojawić się zaraz po bloku v-if.

Na przykład:

Ten akapit zostanie wyrenderowany, jeśli 'isVar' stanie się prawdą

W przeciwnym razie ten akapit zostanie wyrenderowany.

Możemy również zastosować v-else na bloku szablonu.

v-inaczej-jeśli

Podobnie jak v-else, możemy również użyć dyrektywy v-else-if wraz z dyrektywą v-if.

Na przykład:

v-jeśli vs. v-pokaż

Rodzaje v-if i v-show wykonują to samo zadanie. Obaj ukrywają elementy w DOM w oparciu o prawdziwość lub fałszywość przekazanego wyrażenia, ale z subtelną różnicą ukrywania i nie renderowania elementów.

Jeśli porównamy czas i koszt przetwarzania między tymi dwoma. V-if kosztuje więcej podczas działania lub przełączania, podczas gdy v-show kosztuje więcej na początku renderowania. Dlatego rozsądnie byłoby użyć v-show, gdy przełączanie jest celem. W przeciwnym razie preferowane jest v-if.

Zawijanie

W tym artykule dowiedzieliśmy się, jak warunkowo renderować DOM w Vue.js przy użyciu dyrektyw v-if i v-else. Pokazaliśmy kilka przykładów i dowiedzieliśmy się o rzeczywistej różnicy między dyrektywą v-show i v-if. Jeśli ten artykuł pomoże ci lepiej zrozumieć i zrozumieć koncepcje, nie przestawaj odwiedzać linuxhint.com dla takich przydatnych treści.