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.