Working with Attributes in the Vue Framework

You can insert property values from data not only into text, but also into tag attributes. This is done using the v-bind directive.

Let's use this directive to set the value of the src attribute for the img tag. Let the desired value be stored in the property:

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

Let's write the value from the property to the src attribute:

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

Usually, everyone uses the shorthand v-bind. It's just a colon before the attribute name:

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

Let data store the text and the link address:

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

Generate the following code using this data:

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