Dyrektywy warunkowe w Vue.js

Ten wpis jest 4 częścią z 8 w kursie Vue.js

Pisząc aplikacje w Vue.js często spotkasz się z sytuacją, w której wyświetlenie lub nie danego elementu będzie zależało od wartości zmiennej. Właśnie do tego służą dyrektywy warunkowe v-if, v-else, v-else-if, (oraz w pewnym sensie v-show), które odpowiadają instrukcjom warunkowym znanym z JavaScript. To właśnie te dyrektywy Ci dziś zademonstruję.

Pokazywanie i ukrywanie elementów za pomocą dyrektywy v-if

Najbardziej podstawową dyrektywą umożliwiającą pokazywanie elementów warunkowo jest dyrektywa v-if. Odpowiada ona instrukcji warunkowej if (warunek) { /*...kod...*/ } w JavaScript. Jeśli wartość przekazanego do niej wyrażenia będzie prawdziwa, to element zostanie dodany do drzewa DOM. Jeśli będzie fałszywa, w ogóle się tam nie pojawi.

new Vue({
  data() {
    return {
      text: "",
    };
  }
}).$mount("#app");
<div id="app">
  <input v-model="text"/>
  <p v-if="text === ''">Wpisz coś</p>
</div>

See the Pen v-if by Wojciech Urbański (@wojtiku) on CodePen.

Na powyższym przykładzie możesz zobaczyć jak proste jest używanie dyrektywy v-if – wpisz coś do pola tekstowego. Warunek text === '' jest spełniony wtedy, gdy pole text jest puste i to właśnie wtedy pokazywany jest tekst „Wpisz coś”.

Scenariusz alternatywny z v-else

Jeśli na podstawie jednego warunku chcesz obrać jeden z dwóch scenariuszy, możesz użyć dyrektywy v-else. Nie przyjmuje onadnej wartości, a element zawierający v-else musi następować bezpośrednio po elemencie zawierającym v-if (lub po v-else-if, o której za chwilę). Inaczej Vue nie będzie w stanie stwierdzić do czego odnosi się dany v-else.

<div id="app">
  <input v-model="text"/>
  <p v-if="text === ''">Wpisz coś</p>
  <p v-else>Dzięki!</p>
</div>

See the Pen v-else by Wojciech Urbański (@wojtiku) on CodePen.

Jeśli alternatyw może być więcej, użyj dyrektywy v-else-if, której wartością będzie kolejny warunek – zupełnie jak w normalnym JS.

<div id="app">
  <input v-model="text"/>
  <p v-if="text === ''">Wpisz coś</p>
  <p v-else-if="text === 'tajne'">Zgadłaś/eś!</p>
  <p v-else>Nie zgadłaś/eś :(</p>
</div>

Chowanie i pokazywanie elementów z użyciem v-show

Czasami napotkasz na sytuację, w której dodanie/usunięcie elementu przez v-if/v-else będzie z różnych względów niepożądane. Możesz wtedy użyć dyrektywy v-show, która w przypadku, kiedy warunek nie jest spełniony nadaje elementowi styl display: none;. Oznacza to, że jest on zawsze obecny w drzewie DOM, ale czasami po prostu niewidoczny.

Warto wspomnieć, że dyrektywa v-else nie działa razem z v-show. Mogę Ci wyjaśnić ze szczegółami, dlaczego tak jest na szkoleniu: Poznaj Vue.js w dwa dni na naszym szkoleniu! Aby osiągnąć ten efekt musisz po prostu powtórzyć v-show z odwróconym warunkiem. Ilustruje to poniższy przykład.

See the Pen v-show by Wojciech Urbański (@wojtiku) on CodePen.

Ćwiczenie

Użyj narzędzi dla programistów w przeglądarce, z której korzystasz i zobacz na własne oczy czym różnią się od siebie dyrektywy v-if/v-else oraz v-show.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
5 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Tomasz Nastały
Tomasz Nastały
1 rok temu

„element zawierający v-else musi następować bezpośrednio po elemencie zawierającym v-if”

A jest jakieś obejście na to bez tworzenia drugiego v-if? To mocno ogranicza, a co jeśli chcemy w #else pokazać coś w całkowicie innej części DOM, a nie zaraz po? (w Angular np. jest to możliwe :P)

Michał z typeofweb.com
Admin
Michał z typeofweb.com (@michal-miszczyszyn)
2 lat temu

W jakiej sytuacji naprawdę chciałbyś wpłynąć na coś leżącego w całkowicie innym miejscu? To brzmi jak straszny antywzorzec.

Tomasz Nastały
Tomasz Nastały
2 lat temu

Zależy co Ci UX wymyśli, dla mnie scenariusz realny i jak myślę, to już miałem takie sytuacje, co prawda rzadko ale zdarzyło się. Czyli jak chce w innym miejscu, to już muszę użyć 2x v-if ?:(

Michał z typeofweb.com
Admin
Michał z typeofweb.com (@michal-miszczyszyn)
2 lat temu

Bez konkretnego przykładu to sobie można gdybać.
Nigdy nie było mi to potrzebne, a sam pomysł jest moim zdaniem kiepski, żeby odległe części aplikacji wpływały na siebie przez warstwę widoku — to antywzorzec.

Dawid Kozłowski
Dawid Kozłowski
3 miesięcy temu

Macie literówkę, w „Nie przyjmuje onadnej wartości”