Dyrektywy warunkowe w Vue.js

Ten wpis jest 4 częścią z 7 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. 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.