Vue.js posiada wiele ciekawych mechanizmów, niektóre bardziej rozbudowane, inne dość proste. Dziś zajmę się reprezentami z tych drugich. Pomimo swej prostoty mechanizmy te są jednak bardzo przydatne. Czasem wystarczą w zupełności aby stworzyć prostą aplikację webową.
Mowa tu o dyrektywach warunkowych. Są one wbudowane w logikę Vue i trzeba wiedzieć jak z nich korzystać. Wiem, że pokazywałem już niektóre z nich w przykładowym kodzie, przy okazji tworzenia mojej aplikacji Vue. Jest to jednak temat, który warto mieć uporządkowany. Stąd dzisiejszy post.
Zaczynamy od takiego podstawowego elementu body, w przydkładowym dokumencie html:
|
1 2 3 4 5 6 7 8 9 |
<body> <div id="vueApp"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> |
Dołączam do niego kod Vue z CDNu oraz plik ze skryptem app.js. Plik ten jest póki co pusty. Pierwszą podstawową logikę przedstawić mogę nie używając zewnętrznego kodu. Element, w którym dodaję moje przykłady to div o ID vueApp.
Dyrektywa v-show
Pierwszą dyrektywą, którą dziś omóię jest v-show. Działa ona bardzo podobnie jak angularowe ng-show, przyjmuje wartość która może wynosić true lub false. Jeżeli mamy ten pierwszy przypadek, element do którego przypisana jest dyrektywa, będzie widoczny na stronie. W przeciwnym wypadku użytkownik go nie zobaczy. Oto przykład:
|
1 2 3 4 5 6 7 8 9 |
<body> <div id="vueApp"> <h1 v-show="true">User logged in</h1> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> |
W tym wypadku użytkownik zobaczy nagłówek. Jeśli zmieniłbym wartość dyrektywy v-if na false, nagłówek po przeładowaniu nie byłby widoczny. Oczywiście wpisywanie dosłownej wartości boolowskiej nie jest zbyt przydatne. Jako wartość dyrektywy podać można zwykłą zmienną z obiektu Vue data, lub wartość obliczaną.
Do pliku app.js dodam następujący kod:
|
1 2 3 4 5 6 |
var vueApp = new Vue({ el: '#vueApp', data: { loggedIn: true, }, }) |
Teraz zmienię dyrektywę tak aby testowała zmienną loggedIn:
|
1 |
<h1 v-show="loggedIn">User logged in</h1> |
Dopóki loggedIn równe jest true, użytkownik zobaczy nagłówek.
W Vue nie ma odpowiednika angularowergo ng-hide. Jeżeli chciałbym coś warunkowo ukryć, muszę po prostu obrócić logikę v-show:
|
1 2 3 4 |
<div id="vueApp"> <h2 v-show="loggedIn">User logged in</h2> <h2 v-show="!loggedIn">User not logged in</h2> </div> |
Teraz jeżeli loggedIn zmieni się na false, użytkownik zobaczy drugi nagłówek, informujący go o stanie rzeczy.
Dyrektywy v-if oraz v-else
Druga dyrektywa warunkowa, której używałem już wcześniej, to v-if. Działą ona bardzo podobnie do v-show. Również przyjmuję wartość którą testuję pod względem prawdziwości. Jeżeli wartość równa będzie true, element do którego przypisana jest dyrektywa, wyświetli się na stronie.
Jakie są w takim razie różnice pomiędzy v-if a v-show? Pierwsza to taka, że jeżeli v-show nie zda testu, element otrzyma styl display równy none. Będzie jednak widniał w dokumencie. W przypadku v-if, element taki zostanie usunięty z DOMu. Druga różnica jest taka, że do pary dyrektywy v-if istnieje v-else.
Jeżeli test v-if nie uda się, program poszuka najbliższego v-else. Gdy taki znajdzie, wyświetli zawartość właśnie tego elementu. Oto przykład:
|
1 2 3 4 |
<div id="vueApp"> <h2 v-if="loggedIn">User logged in</h2> <h2 v-else>User not logged in</h2> </div> |
Jeżeli wartość loggedIn będzie fałszywa, program wyświetli drugi nagłówek, ten do którego przypisana jest dyrektywa v-else. Oczywiście jeżeli loggedIn równać będzie się true, drugi nagłówek nie będzie widoczny.
To wszystko na dziś ale jeśli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :).