Hack Frontend Community

Что такое привязки атрибутов во Vue?

Привязки атрибутов во Vue.js позволяют динамически устанавливать значения HTML‑атрибутов или пропсов компонентов на основе данных. Для этого используется директива v-bind или её краткий синтаксис :.

Почему это важно?

  • Реактивность. При изменении привязанного свойства Vue автоматически обновит соответствующий атрибут в DOM.
  • Гибкость. Можно задавать условные, вычисляемые и составные значения атрибутов.
  • Чистота шаблона. Лишает потребности в ручном манипулировании DOM через JavaScript.

Синтаксис привязки

Стандартный вид

<a v-bind:href="url">Ссылка</a>

Короткий вид

<a :href="url">Ссылка</a>

Пример в компоненте

<template>
  <button
    :disabled="isLoading"
    :title="tooltipText"
    v-bind:data-id="item.id"
  >
    {{ isLoading ? "Загрузка..." : "Отправить" }}
  </button>
</template>

<script>
export default {
  props: {
    url: String,
    item: Object,
    isLoading: Boolean,
    tooltipText: String
  }
};
</script>

Не путать с обычной строкой:

Запись <button disabled="isLoading"> не сработает — без v-bind или : Vue не интерпретирует значение как переменную.

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

С помощью объекта

<template>
  <img v-bind="imageAttrs" />
</template>

<script>
export default {
  data() {
    return {
      imageAttrs: {
        src: "logo.png",
        alt: "Логотип",
        width: 100,
        height: 50
      }
    };
  }
};
</script>

Note:

Vue автоматически распределит все поля объекта imageAttrs как атрибуты <img>.

Шаги для использования привязок атрибутов

1

1. Определите данные или пропы

В data или props компонента задайте переменные для атрибутов.

2

2. Используйте `v-bind` или `:` в шаблоне

Добавьте :атрибут="выражение" к нужному элементу.

3

3. Избегайте кавычек вокруг выражений

Пишите :href="url", а не :href="'url'" — иначе оно станет строкой.

Note:

Для привязки классов и стилей есть отдельные директивы :class и :style, но они тоже реализованы через v-bind.

Узнайте подробности в официальной документации Vue: Attribute Binding