Работа з атрыбутамі ў фрэймворку Vue

Устаўляць значэння ўласцівасцяў з data можна не толькі ў тэкст, але і ў атрыбуты тэгаў. Гэта робіцца з дапамогай дырэктывы v-bind.

Давайце з дапамогай гэтай дырэктывы ўсталюем значэнне атрыбута src для тэга img. Хай жаданае значэнне захоўваецца ў уласцівасці:

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

Запішам значэнне з уласцівасці ў атрыбут src:

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

Звычайна ўсе карыстаюцца скарочаным варыянтам v-bind. Ён уяўляе сабой проста двукроп'е перад імем атрыбута:

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

Хай у data захоўваецца тэкст і адрас спасылкі:

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

Сфармуйце з дапамогай гэтых даных наступны код:

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