Travailler avec les attributs dans le framework Vue

Il est possible d'insérer les valeurs des propriétés de data non seulement dans le texte, mais aussi dans les attributs des balises. Cela se fait à l'aide de la directive v-bind.

Utilisons cette directive pour définir la valeur de l'attribut src pour la balise img. Supposons que la valeur souhaitée soit stockée dans la propriété :

data() {
	return {
		attr: 'img.png',
	}
}

Écrivons la valeur de la propriété dans l'attribut src :

<template>
	<img v-bind:src="attr">
</template>

Généralement, tout le monde utilise la version abrégée de v-bind. Elle consiste simplement en un deux-points devant le nom de l'attribut :

<template>
	<img :src="attr">
</template>

Supposons que le texte et l'URL du lien soient stockés dans data :

data() {
	return {
		text: 'page',
		href: 'page.html',
	}
}

Générez le code suivant à l'aide de ces données :

<a href="page.html">page</a>