Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Для чого використовується v-bind?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`v-bind` - одна з ключових директив Vue, яка використовується для **динамічного зв'язування значень з HTML-атрибутами, props компонентів і навіть класами/стилями**.

Простими словами:

> `v-bind` **робить атрибути "реактивними", тобто прив'язаними до даних.**

---

## 1. Динамічна прив'язка HTML-атрибутів

```javascript
<img v-bind:src="imageUrl">
```

Скорочений запис:

```javascript
<img :src="imageUrl">
```

Щойно `imageUrl` зміниться - DOM оновиться автоматично.

---

## 2. Прив'язка класів

Vue вміє приймати рядки, масиви і об'єкти.

#### Через об'єкт:

```javascript
<div :class="{ active: isActive, error: hasError }"></div>
```

#### Через масив:

```javascript
<div :class="['btn', statusClass]"></div>
```

---

## 3. Прив'язка стилів

```javascript
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>
```

---

## 4. Прив'язка props у компонентах

```javascript
<UserCard :user="currentUser" :is-admin="true" />
```

Без `v-bind` усі атрибути вважаються рядками.

---

## 5. Прив'язка кількох атрибутів одразу

Можна передати об'єкт:

```javascript
<div v-bind="attrsObj"></div>
```

```javascript
attrsObj = {
  id: 'user-block',
  class: 'profile',
  title: 'User info'
}
```

---

## 6. Модифікатор `.prop`

Використовується для прив'язки як DOM-властивості, а не атрибута:

```javascript
<div :value.prop="someValue"></div>
```

---

## 7. Динамічне ім'я атрибута

```javascript
<div v-bind:[attrName]="value"></div>
```

```javascript
attrName = "data-id";
value = 42;
```

Результат:

```javascript
<div data-id="42"></div>
```

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати188 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.