Skocz do treści

Już wkrótce odpalamy zapisy na drugą edycję next13masters.pl. Zapisz się na listę oczekujących!

Dyrektywy warunkowe w 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ę.

Ten artykuł jest częścią 4 z 8 w serii Vue.js.

Zdjęcie Wojtek Urbański
JavaScript5 komentarzy

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>

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 ona żadnej 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>

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: zapisz się na szkolenie z Vue.js. Aby osiągnąć ten efekt musisz po prostu powtórzyć v-show z odwróconym warunkiem. Ilustruje to poniższy przykład.

Ć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.

👉  Znalazłeś/aś błąd?  👈Edytuj ten wpis na GitHubie!

Autor