Vue 3: renderowanie warunkowe z v-if, v-else i v-show
zweryfikowano 2 września 2026 · 3 min
v-if tworzy lub niszczy element, v-show zostawia go w DOM i ukrywa przez display: none. Używaj v-show do tego, co często się otwiera i zamyka, a v-if do całej reszty. Łańcuchy warunków budujesz przez v-else-if i v-else.
Sklep musi informować, czy produkt jest dostępny. Vue daje dwa narzędzia do pokazywania i ukrywania elementu w zależności od warunku: v-if i v-show. Są do siebie podobne, ale nie robią tego samego.
Przygotowanie warunku
Dodaj stan magazynowy do stanu komponentu:
<script setup>
import { ref } from 'vue'
const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
</script>v-if, v-else-if, v-else
v-if umieszcza element na stronie tylko wtedy, gdy wyrażenie jest prawdziwe.
<p v-if="inventory > 10">En stock</p>Żeby pokryć kilka przypadków, złóż łańcuch z v-else-if i v-else:
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inventory > 10">En stock</p>
<p v-else-if="inventory > 0">Bientôt en rupture</p>
<p v-else>En rupture</p>
</div>Naraz istnieje tylko jeden z tych trzech akapitów. Ustaw inventory na 5, potem na 0, i zobacz, jak komunikat się zmienia.
v-else-if i v-else muszą następować bezpośrednio po elemencie z v-if. Wystarczy komentarz albo inny element pomiędzy nimi, a Vue ostrzeże w konsoli, że v-else nie ma odpowiadającego mu v-if.
Warunek dla kilku elementów naraz
Żeby objąć warunkiem całą grupę bez dokładania zbędnego div, przenieś v-if na <template>. Ten znacznik nie produkuje niczego w finalnym HTML-u.
<template v-if="inventory > 0">
<h2>Disponible</h2>
<p>Expédié sous 48 heures.</p>
</template>v-show
v-show odpowiada na tę samą potrzebę, ale działa inaczej:
<p v-show="inventory > 0">Livraison sous 48 h</p>Element jest zawsze obecny w DOM. Kiedy warunek jest fałszywy, Vue po prostu nadaje mu display: none. Otwórz inspektor, żeby to sprawdzić:
<!-- inventory vaut 0, avec v-if : l’élément a disparu -->
<!--v-if-->
<!-- inventory vaut 0, avec v-show : l’élément est là, masqué -->
<p style="display: none;">Livraison sous 48 h</p>Który wybrać
Różnica sprowadza się do kosztu operacji.
v-iftworzy i niszczy element, a wraz z nim komponenty potomne i ich stan. Wysoki koszt przy przełączeniu, zerowy koszt, gdy warunek jest fałszywy.v-showzmienia tylko jedną właściwość CSS. Wysoki koszt przy pierwszym renderze, bo element i tak zostaje zbudowany, prawie zerowy przy kolejnych przełączeniach.
W praktyce: v-show do tego, co często się otwiera i zamyka, jak menu albo rozwijany panel. v-if do całej reszty, zwłaszcza do tego, co jest kosztowne w budowie albo w pewnych przypadkach w ogóle nie powinno istnieć.
Element ukryty przez v-show zostaje w HTML-u: każdy odczyta go w inspektorze. Do tego, co nie może być widoczne, użyj v-if, a przede wszystkim w ogóle nie wysyłaj tego do przeglądarki.
v-if i v-for na tym samym elemencie
Nie łącz ich na tym samym znaczniku. Pętla v-for jest tematem kolejnego rozdziału. Od Vue 3 v-if ma pierwszeństwo i jest obliczane przed pętlą: zmienna pętli jeszcze nie istnieje, co kończy się błędem. Umieść v-if na wewnętrznym <template> albo przefiltruj listę we właściwości obliczanej. Oba sposoby zobaczymy w rozdziale 7.
Bez zmian. v-if i v-show to dyrektywy szablonu, zmienia się tylko forma deklaracji inventory.
inventory jest mniejsze niż 5, nie psując pozostałych komunikatów. Potem sprawdź w inspektorze, że element ukryty przez v-show faktycznie jest obecny w DOM.Częste błędy
<template> albo filtruj we właściwości obliczanej.