Kurs Vue.js krok po kroku – Przypisywanie atrybutów

Dzisiaj zajmiemy się przypisywaniem wartości do różnych atrybutów HTML. Coś co w zasadzie będziemy robili bardzo często i coś co jest absurdalnie proste (jak w zasadzie wszystko inne w Vue.js).

Do przypisywania wartości w Vue.js służy dyrektywa v-bind po której wymieniamy element do którego chcemy dane podstawić. Najlepiej widać to na przykładach:

Podobnie jak w przypadku omawianych zdarzeń i tutaj mamy skrót. Tak jak tam zamienialiśmy v-on:click na @click, tak tutaj v-bind:style możemy zamienić na samo :style.

Możemy nie tylko podstawiać suche dane ale także na nich operować. Chyba najczęściej przywoływany przykład to ten w którym po wykonaniu jakiejś akcji chcemy pokazać jakiś komunikat, tudzież zmienić mu kolor np. na czerwony przy powstaniu błędu.

Co można prosto przetłumaczyć na: "jeżeli dana zmienna jest na TRUE to przypisz klasę, jak FALSE to oczywiście nie".

Jeszcze prościej to widać tutaj:

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!

Kurs Vue.js krok po kroku

  1. Wprowadzenie i hello world
  2. Chrome DevTools
  3. Warunki i pętle
  4. Zdarzenia i metody
  5. Przypisywanie atrybutów
  6. kolejne
  7. odcinki
  8. wkrótce

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

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