Для чого використовується v-bind?

VueJunior~1 хв читання

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>

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.