Vue.js - warunki i pętle

Kurs Vue.js krok po kroku – warunki i pętle

2 komentarze

Po dwóch odcinkach wprowadzających wreszcie możemy przystąpić do konkretów. Dzisiaj nauczymy się jak korzystać z warunków i pętli w Vue.js.

Środowisko do pracy

W pierwszym odcinku mówiłem, że do nauki możesz użyć np. serwisu JSFiddle. Fajna sprawa jeżeli chcemy coś porobić w dowolnym miejscu, na dowolnej maszynie byle z dostępem do internetu.

Ja jednak dla swojej wygody skorzystam klasycznie z edycji na swoim własnym laptopie. Utwórz sobie jakiś katalog, wrzuć do niego index.html i nie zapomnij załadować do niego biblioteki Vue.js. Ja skorzystam z hostowanego pliku na CDN https://unpkg.com/vue, który zawsze odnosi się do najnowszej wersji.

Warunki IF / ELSE

Jak już wspominałem wcześniej dyrektywy Vue.js prosto poznać – zaczynają się od przedrostka „v-”. v-if to banalna konstrukcja.

Możesz też użyć v-else pamiętając, że musi się on znaleźć bezpośrednio za elementem z warunkiem IF.

Warunek SHOW

Podobny wynik da dyrektywa v-show aczkolwiek różnica między nimi tkwi w działaniu. Podczas kiedy v-if determinuje renderowanie danego elementu, v-show zawsze element renderuje, aczkolwiek ustawi mu niewidoczność w CSS.

Zobacz podane przykłady na filmie (na dole) – wtedy wszystko będzie jasne.

Pętle FOR

Tak samo łatwo użyć v-for

Przykłady działania

Tutaj za kilka dni pojawi się film prezentujący więcej przykładów użycia. Tekst ma to do siebie, że ciężko przekazać w nim wszystkie możliwości dlatego zachęcam obejrzeć film gdzie omawiam te przykłady.

Subskrybuj kanał, żeby nie przeoczyć tego odcinka


2 komentarze

Inne wpisy

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL