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://smartdev.software/blog/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> |