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”.
|
1 |
v-bind:nekiHtmlAtribut="dataSvojstvo" |
Koristeći ovu direktivu možemo reaktivno da povežemo vrednost atributa sa “data” objektom:
Primer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<img v-bind:src="imageSrc"> <a v-bind:href = "hreflink">...</a> <div v-bind:title="message">...</div> <div v-bind:class="nekaKlasa">...</div> <div v-bind:style="{ color:red, min-width: sirina }">...</div> <script> new Vue({ el: '#example', data: { imageSrc: "https://webprogramiranje.org/images/neka-slika.jpg", hreflink: "https://webprogramiranje.org", message: "Neka poruka", nekaKlasa: "podebljano", sirina: "4rem", } }); </script> |
Skraćeno pisanje direktive
Ova direktiva v-bind: ima skraćenu sintaksu koju predstavlja dvotačaka :
Primer
|
1 |
<a :href="url">...</a> |
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.
|
1 |
<div v-bind:class="{'nazivKlase1': true,'nazivKlase2': false,'nazivKlase3': true}"></div> |
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.
|
1 2 3 4 5 6 7 8 9 |
<div v-bind:class="sveKlaseElementa"></div> data: { sveKlaseElementa: { 'nazivKlase1': true, 'nazivKlase2': false, 'nazivKlase3': true } } |
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:
|
1 |
<li v-for="page in totalPages" v-bind:class="{'page-item':true, 'active':(page === currentPage)}"> |
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']"
|
1 2 3 4 5 6 7 8 9 10 11 |
<div v-bind:class="[nazivKlase1, nazivKlase2]"> <script> let vm = new Vue({ el: '.container', data: { nazivKlase1: 'naziv-klase-1', nazivKlase2: 'naziv-klase-2' } }); </script> |
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
|
1 |
v-bind:class="[obicnaKlasa, (page === currentPage) ? uslovnaAktivnaKlasa : '']" |
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:
|
1 |
<div class="box" v-bind:class="[color, {podebljano: istinitost}, 'add-margin']"> |
Primer
See the Pen WdmBWx by Web programiranje (@chos) on CodePen.
v-bind:style
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).
|
1 2 3 4 5 6 7 8 9 10 |
<div v-bind:style="{ 'background-color': activeColor, fontSize: fontSize + 'px' }"></div> <script> let vm = new Vue({ data: { activeColor: 'red', fontSize: 30 } }); </script> |
ili da sve stavimo u objekat:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div v-bind:style="styleObject"></div> <script> let vm = new Vue({ computed: { styleObject: function (){ return { color: 'red', fontSize: '13px' } } }); </script> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div v-bind:style="[{color: 'red',fontSize: '15px'}, styleObjectB, styleObjectC]"></div> <script> data: { sirina: 30px, styleObjectB: { fontSize: '50px' } }, computed: { styleObjectC: function (){ return { width: this.sirina + px } } } </script> |