# Работа с атрибутами в фреймворке 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>`
← →
↑