v-bind для связывания атрибутов

v-bind — директива, которая позволяет динамически связывать значения атрибутов HTML с данными приложения. Она обеспечивает реактивность элементов, то есть любые изменения в данных автоматически отражаются на связанных атрибутах. В Petite-Vue v-bind используется так же, как в Vue, но с упрощённой интеграцией, что делает его идеальным для небольших проектов или постепенного внедрения реактивности в существующий код.

Синтаксис

Базовый синтаксис v-bind:

<div v-bind:атрибут="выражение"></div>

Где:

  • атрибут — имя HTML-атрибута, который необходимо связать с данными;
  • выражение — любая реактивная переменная или вычисляемое значение из объекта состояния Petite-Vue.

Сокращённая форма записи:

<div :атрибут="выражение"></div>

Двоеточие : перед атрибутом является сокращением для v-bind: и часто используется для компактного кода.

Пример динамического связывания

<div id="app" v-scope="{ isDisabled: true, url: 'https://example.com' }">
    <button :disabled="isDisabled">Нажми меня</button>
    <a :href="url">Перейти</a>
</div>
<script type="module" src="https://unpkg.com/petite-vue?module"></script>
<script>
    PetiteVue.createApp().mount()
</script>

В этом примере:

  • Атрибут disabled кнопки напрямую связан с переменной isDisabled. Если её значение изменится, кнопка автоматически станет активной или заблокированной.
  • Атрибут href ссылки получает значение из переменной url, что позволяет легко менять адрес без изменения HTML.

Связывание нескольких атрибутов

v-bind позволяет связывать несколько атрибутов через объект:

<div v-bind="{ id: elementId, title: elementTitle }"></div>

Здесь атрибут id и title будут автоматически получать значения из соответствующих реактивных переменных.

Работа с классами и стилями

Для атрибутов class и style есть расширенные возможности.

Динамические классы:

<div :class="{ active: isActive, hidden: isHidden }"></div>
  • Класс active будет применяться, если isActive равно true.
  • Класс hidden будет применяться при значении isHidden = true.

Также можно использовать массив для множественных классов:

<div :class="[primaryClass, secondaryClass]"></div>

Динамические стили:

<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
  • Стили обновляются автоматически при изменении реактивных переменных textColor и fontSize.

Обработка булевых атрибутов

В HTML некоторые атрибуты работают как флаги (например, checked, disabled, readonly). Использование v-bind гарантирует корректную реактивность:

<input type="checkbox" :checked="isChecked">

При изменении isChecked состояние чекбокса синхронизируется с данными.

Атрибуты, зависящие от вычисляемых значений

v-bind позволяет использовать любое JavaScript-выражение:

<img :src="user.avatar || 'default.png'" :alt="user.name + ' avatar'">
  • Если у пользователя нет аватара, будет использовано изображение по умолчанию.
  • Атрибут alt динамически формируется из имени пользователя.

Ограничения и особенности

  • v-bind не поддерживает привязку к нестандартным или приватным атрибутам напрямую без использования data-*.
  • Выражение в v-bind должно быть безопасным и не содержать побочных эффектов, так как оно может пересчитываться при каждом обновлении реактивного состояния.
  • Для событий лучше использовать @click и другие слушатели вместо прямого связывания через v-bind.

Практическое использование

v-bind особенно полезен для:

  • Форм с динамическими полями (disabled, readonly, required);
  • Ссылок с меняющимся href;
  • Изображений с меняющимся src;
  • Компонентов с изменяемыми атрибутами;
  • Динамических классов и стилей.

В Petite-Vue v-bind сохраняет лёгкость синтаксиса, обеспечивая реактивность без необходимости полной инфраструктуры Vue, что делает его идеальным инструментом для небольших интерактивных элементов и постепенного расширения функциональности страницы.

Оглавление