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

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


Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

Send this to a friend