Warunkowe renderowanie/wyświetlanie w Vue z v-if, v-show, v-else i v-else-if

Wprowadzenie

Vue.js to prosty framework aplikacji internetowych do tworzenia dynamicznych interfejsów internetowych i Aplikacje jednostronicowe (SPA). Tworząc te aplikacje, często tego chcemy renderować coś w oparciu o określone kryteria – na tym polega istota renderowania warunkowego.

Renderowanie warunkowe odnosi się do możliwości renderowania odrębnych znaczników interfejsu użytkownika (UI) w zależności od tego, czy warunek jest prawdziwy, czy nie. Pojęcie to jest często używane w kontekstach takich jak pokazywanie lub ukrywanie komponentów (przełączanie), przełączanie funkcjonalności aplikacji, obsługa uwierzytelniania i autoryzacji i wiele innych.

W tym artykule przyjrzymy się różnym sposobom renderowania warunkowego w Vue.js za pomocą v-if, v-else-if, v-else dyrektywy. Przyjrzymy się również kilku przykładom i podkreślimy różnicę między v-if i v-show.

v-jeśli

Połączenia v-if dyrektywa jest przyzwyczajona warunkowo renderuj blok co oznacza blok z v-if atrybut będzie tylko wytworzony jeśli wyrażenie dyrektywy zwraca a true wartość. Jeśli wyrażenie zwróci nieprawidłowy wynik (na przykład null, 0, pusta struna, false), elementem jest usunięte z DOMU.

Zilustrujmy to zachowanie na praktycznym przykładzie:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Ponieważ login jest ustawione na trueThe <div> blok zawierający v-if dyrektywa zostanie utworzona i w ten sposób wyświetlona.

v-jeśli vs v-pokaż

Warto zauważyć, że v-show działałoby również w powyższym przykładzie i działałoby pozornie identycznie, ale istnieje między nimi różnica.

v-if renderuje warunkowo element, natomiast v-show warunkowo pokazuje/wyświetla element.

Oznacza to, że po przełączeniu warunku warunkowego, v-if faktycznie usunie i przywróci komponenty v-show po prostu czyni je niewidocznymi lub widocznymi. Poniższa animacja ilustruje, jak to zrobić v-if faktycznie usuwa i odtwarza bloki kodu:

Tymczasem v-show zawsze utrzyma element w DOM i po prostu zmieni jego CSS, aby przełączyć jego wygląd (ustawiając jego display do none):

v-inaczej

Połączenia v-else dyrektywa jest v-if dyrektywa, która pozwala dostosować plik false wartość w renderowaniach warunkowych. Jeśli tak nie jest true, Można użyć v-else określić, co powinno się zamiast tego wydarzyć.

Załóżmy na przykład, że wprowadzamy hasło i chcemy, aby wyświetliło się komunikat o błędzie, "Słabe hasło", jeśli długość wejścia jest mniejsza niż 6 lub wyświetl "Silne hasło" jeśli długość jest większa niż 6.

To jest renderowanie warunkowe z opcją obsługi fałszywych przypadków:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Wykorzystajmy to do przełączania zawartości prostej strony logowania, tak aby zmieniała ona komunikat w zależności od tego, czy użytkownik jest zalogowany, czy nie. Zmodyfikujemy treść przycisku w oparciu o userLoggedIn stan również:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Zdarzenie kliknięcia przycisku spowoduje przełączenie userLoggedIn element danych, co będzie miało wpływ na wyświetlane dane, jak pokazano poniżej:

v-jeżeli-jeżeli

v-else-if extends a v-if ze związkiem else...if blok. Jest to podobne do JavaScriptu else...if block, ponieważ pozwala nam dodać instrukcję if do istniejącej v-if. Jest to stosowane, gdy istnieje wiele kryteriów do sprawdzenia i można je połączyć kilka razy:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Wnioski

W tym artykule widzieliśmy, jak warunkowo renderować element za pomocą v-if, v-else, v-else-if. Wyjaśniliśmy także różnicę pomiędzy v-if i v-show.

• Coinsmart. Najlepsza w Europie giełda bitcoinów i kryptowalut.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. DARMOWY DOSTĘP.
• CryptoJastrząb. Radar Altcoin. Bezpłatna wersja próbna.
• Źródło: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/