search icon

Vue – Attribute binding

Attributes i Vue skrives grundlæggende ligesom i HTML name=”value”. Men vil man gøre attributes dynamiske kan man ikke bruge {{ }} som andre steder i Vue. Her bruges i stedet et directive, der hedder v-bind. Hvis jeg i min data har f.eks. adressen til et billede som her

// app.js
data() {
  return {
    imageSource: 'https://picsum.photos/800/600'
  }
},

Kan jeg indsætte data i en attribute med v-bind directive som her

<!--html-->
<div id="app">
  <img v-bind:src="imageSource" alt="">    
</div>

v-bind kan dog undlades, så man kun sætter et kolon foran en attribute, f.eks. :src

Læs mere om Vue

Skriv et svar

Verified by MonsterInsights