Vue Academy · Lekcja

Warunki i pętle

Wyrenderują Państwo elementy warunkowo za pomocą v-if oraz listy za pomocą v-for.

Warunki i pętle to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Renderowanie warunkowe

Vue pozwala wyświetlać lub ukrywać części interfejsu na podstawie danych.

v-if warunkowo renderuje element
v-else-if i v-else łączą warunki
v-show przełącza widoczność

v-if

Dyrektywa v-if renderuje element tylko wtedy, gdy jej wyrażenie ma wartość prawdziwą.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if i v-else

Łącz warunki za pomocą v-else-if i v-else. Muszą one znajdować się bezpośrednio za v-if.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show zawsze renderuje element, ale przełącza jego właściwość CSS display.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if a v-show

Najważniejsza różnica:

v-if całkowicie dodaje element do DOM lub go z niego usuwa
v-show pozostawia element w DOM, przełączając tylko właściwość display

v-show należy stosować w przypadku elementów często przełączanych. v-if należy stosować, gdy warunek rzadko się zmienia lub element jest kosztowny w renderowaniu.

v-for dla tablic

Dyrektywa v-for renderuje listę, iterując po tablicy.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for z indeksem

v-for może również udostępniać indeks każdego elementu.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

Znaczenie :key

Podczas używania v-for zawsze należy podawać unikalny :key.

Pomaga Vue śledzić tożsamość każdego węzła
Umożliwia wydajne i poprawne aktualizowanie DOM
Należy używać stabilnego, unikalnego identyfikatora, a nie indeksu tablicy, gdy elementy zmieniają kolejność

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Dlaczego :key ma znaczenie

Bez odpowiedniego klucza Vue może ponownie użyć niewłaściwych elementów po zmianie listy.

Pola formularzy mogą zachować niewłaściwą wartość
Animacje mogą działać nieprawidłowo
Stan może zostać przypisany do niewłaściwego wiersza

Stabilny, unikalny klucz zapobiega tym błędom.

v-for dla obiektów

v-for może iterować po wartościach właściwości obiektu, opcjonalnie udostępniając klucz i indeks.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Łączenie v-for i warunków

Aby filtrować listę, lepiej użyć właściwości obliczanej niż umieszczać v-if na tym samym elemencie co v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat instrukcji warunkowych i pętli.

Podsumowanie: instrukcje warunkowe i pętle

Poznali Państwo renderowanie list i warunków:

v-if / v-else-if / v-else renderują elementy warunkowo
v-show przełącza tylko właściwość display
v-for iteruje po tablicach i obiektach
Zawsze należy dodawać unikalny :key
Listy należy filtrować za pomocą właściwości obliczanych

Następnie: poznają Państwo wiązanie atrybutów i klas.

Często zadawane pytania

Czy lekcja „Warunki i pętle” jest bezpłatna?

Tak — pełny tekst „Warunki i pętle” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Warunki i pętle”?

Wyrenderują Państwo elementy warunkowo za pomocą v-if oraz listy za pomocą v-for. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Warunki i pętle”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy