Attribuuttien käsittely Vue-frameworkissa
Ominaisuuksien arvoja data:sta
voidaan lisätä paitsi tekstiin, myös tagien attribuutteihin.
Tämä tehdään v-bind-direktiivillä.
Asetetaan tämän direktiivin avulla
src-attribuutin arvo
img-tagille. Olkoon haluttu arvo
tallennettuna ominaisuuteen:
data() {
return {
attr: 'img.png',
}
}
Kirjoitetaan arvo ominaisuudesta
src-attribuuttiin:
<template>
<img v-bind:src="attr">
</template>
Yleensä käytetään lyhennettyä
muotoa v-bind:stä. Se on
pelkkä kaksoispiste ennen
attribuutin nimeä:
<template>
<img :src="attr">
</template>
Olkoon data:ssa tallennettuna teksti
ja linkin osoite:
data() {
return {
text: 'page',
href: 'page.html',
}
}
Muodosta näiden tietojen avulla seuraava koodi:
<a href="page.html">page</a>
