Привязка атрибутов: v-bind и :

Учимся подставлять данные не только в текст, но и в атрибуты тегов — через директиву v-bind и её краткую запись «двоеточие».

v-bind — директива, которая связывает значение атрибута HTML с выражением из данных компонента. Краткая запись — двоеточие перед именем атрибута: :href.

Зачем нужен v-bind

Интерполяция {{ }} работает только в тексте. Но часто динамическим должен быть атрибут: ссылка href, картинка src, состояние disabled. Написать href="{{ url }}" нельзя — это не сработает. Для атрибутов есть директива v-bind:

<template>
  <a v-bind:href="url">Перейти</a>
  <img v-bind:src="imageUrl" v-bind:alt="caption">
</template>

<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
const imageUrl = ref('/logo.png')
const caption = ref('Логотип Vue')
</script>

Краткая запись :

Полную форму v-bind:href пишут редко — почти всегда используют сокращение в виде двоеточия. Это самая частая запись во всём Vue:

<template>
  <a :href="url">Перейти</a>
  <img :src="imageUrl" :alt="caption">
  <button :disabled="isLoading">Отправить</button>
</template>

Обратите внимание на :disabled="isLoading": значение — это выражение, а не строка. Если isLoading равно true, кнопка станет неактивной. Если false — Vue вообще уберёт атрибут disabled. С булевыми атрибутами это работает само.

Выражения в привязках

Справа от :атрибут может стоять любое JS-выражение, как и в интерполяции:

<template>
  <a :href="'/users/' + userId">Профиль</a>
  <img :src="user.avatar || '/default.png'">
</template>

Текст против атрибута

Запомните правило: фигурные скобки — для текста, двоеточие — для атрибутов. Это убирает 90% путаницы у новичков.

Итог

• v-bind связывает атрибут HTML с выражением из данных.
• Краткая запись — двоеточие: :href, :src, :disabled.
• Значение справа — это выражение, а не строка.
• Интерполяция {{ }} — для текста, : — для атрибутов.