v-bind: Archives | Web Programiranje

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”.

v-bind:nekiHtmlAtribut="dataSvojstvo"

1	v-bind:nekiHtmlAtribut="dataSvojstvo"

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

Primer

<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>

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

<a :href="url">...</a>

1	<a :href="url">...</a>