Sintaksa

Kao što je pomenuto Vue.js može da dinamičiki generiše HTML koristeći neku od direktiva. Za dinamičko generisanje atributa HTML elementa se koristi direktiva “v-bind”.

Koristeći ovu direktivu možemo reaktivno da povežemo vrednost atributa sa “data” objektom:

Primer

Skraćeno pisanje direktive

Ova direktiva v-bind: ima skraćenu sintaksu koju predstavlja dvotačaka :

Primer

v-bind:class

Jedna od češće korišćenih verzija ove direktive je “v-bind:class” koja omogućava dinamičko dodavanje klasa željenom HTML elementu.

a) Jednostavna sintaksa

Sa ovom sintaksom v-bind:class=”imeKlase” mi vezujemo ime klase za izabrani element.

Primer

U ovome primeru ćemo povezati naziv CSS klase sa reaktivnom promenjivom pod nazivom “color” koristeći direktivu
v-bind:class="color":

See the Pen Binding HTML Classes – osove by Web programiranje (@chos) on CodePen.

b) Objektna sintaksa

Ova sintaksa se zasniva na objektu kome je ključ naziv klase a vrednost true ili false.

Treba naglasiti već postojećim klasama na HTML elemntu neće smetati ovakvo dinamičko dodavanje klasa.

Primer

U ovome primeru je prikazana jedna varijacija prethodne sintakse kada se ne koristi inline objekat već promenjiva koja ga predstavlja. Rezultat ove direktive su dodane sledeće klase: “nazivKlase1” i “nazivKlase3” HTML elemenatu.

Primer

See the Pen Class binding – Objektna sintaksa by Web programiranje (@chos) on CodePen.

Kondicionalna objekta sintaksa

U ovoj objektnoj sintaksi može da se koristi inline kondicionalni izrazi:

c) Array sintaksa

U ovoj sintaksi se koriste uglaste zagrade pod duplim navodnicima, stoga je potrebno da koristimo jednostruke navodnike ili da umesto naziva klase koristimo naziv promenjive koji predstavlja klasu v-bind:class="[ variabla, 'naziv-klase']"

Primer

See the Pen Toggling Classes sa Array sintaksom by Web programiranje (@chos) on CodePen.

NAPOMENA:
U array sintaksi je bitan redosled klasa u slučaju preklapanja CSS svojstva. Vrednost definisana sa poslednjom klasom ima prednost. Pa tako u prošlom primeru iako se izabere opcija “bold” opcija “Veliki i tanak tekst” će je pregaziti jer se nalazi dalje u nizu.

Kondicionalna array sintaksa

Ako želite da se željena klasa pojavi uslovno, a to ćemo postiči koristeći ternarnog izraza:

Primer

Primer

See the Pen Class bindinidg – use of inline if inside the array by Web programiranje (@chos) on CodePen.

d) Mixed sintaksa

Moguće je pomešati različite sintakse, stim što u tom slučaju ime klase u nizu, mora biti pod jednostrukim navodnicima:

Primer

See the Pen WdmBWx by Web programiranje (@chos) on CodePen.


v-bind:style

v-direktive

Za inline dodavanje stilova u jedan HTML element, se koristi Vue.js direktiva v-bind:style. Ukoliko je potrebno ova direktiva čak i dodaje prefikse proizvođača CSS svojstvu (kao autoprefixer).
Inline povezivanje style atributa sa direktivom v-bind:style koristi objektnu sintaksu. Za ključ se koristi naziv CSS svojstva, a za vrednost vrednost toga CSS svojstva. Ključ može da bude napisan u vidu tzv. “dash-case” sintakse (ali mora da bude u jednostrukim navodnicima jer dash nije validna vrednost kao ime svojstva u JavaScriptu) ili tzv. “CamelCase” koji će JavaScript kopmajler evluiratiu u to “dash-case” sintaksu (npr. fontSize u font-size).

ili da sve stavimo u objekat:

Primer

See the Pen Binnding inline styles – Objektna sintaksa by Web programiranje (@chos) on CodePen.

Niz objekata

Koristeći ovu direktivu možemo i da primenimo više stilskih objekata na isti element:

Pogledajte slične članke...

Podelite:

Ostavite komentar