> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/direktivy/v-bind.md).

# v-bind

## v-bind

* **Сокращение:** `:`
* **Принимает:** `any (если указан параметр) | Object (если параметр не указан)`
* **Параметр:** `attrOrProp (опционально)`
* **Модификаторы:**
  * `.prop` — используется для связывания в качестве DOM-свойства, а не атрибута. Если тег является компонентом, то `.prop` будет устанавливать свойство на `$el` компонента.
  * `.camel` — преобразует имена атрибутов из kebab-case в camelCase.
  * `.sync` — синтаксический сахар, который будет преобразован в обработчик `v-on` для обновления связанного значения.

Динамически связывает атрибуты тега или входной параметр компонента с выражением.

При использовании с атрибутами `class` и `style` поддерживает массивы и объекты в качестве значений.

Для правильного связывания входного параметра компонента, тот должен быть корректно определён в дочернем компоненте.

Если аргумент не указан, связанное значение может быть содержащим пары имя-значение. В этом случае атрибуты `class` и `style` не поддерживают массивы и объекты.

```markup
<!-- связывание атрибута -->
<img v-bind:src="imageSrc">

<!-- динамическое имя атрибута (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- сокращённая запись -->
<img :src="imageSrc">

<!-- сокращённая запись для динамического имени атрибута (2.6.0+) -->
<button :[key]="value"></button>

<!-- поддержка конкатенации строк -->
<img :src="'/path/to/images/' + fileName">

<!-- связывание CSS-класса -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- связывание локального стиля -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- связывание с объектом, содержащим атрибуты -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- связывание с атрибутами DOM при указании модификатора -->
<div v-bind:text-content.prop="text"></div>

<!-- связывание входного параметра. "prop" должен быть определён в my-component. -->
<my-component :prop="someThing"></my-component>

<!-- передача всех входных параметров компонента в child-component -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
```

Модификатор `.camel` позволяет перевод имени атрибута `v-bind` в camelCase при использовании DOM-шаблонов, например для атрибута `viewBox` SVG:

```markup
<svg :view-box.camel="viewBox"></svg>
```

В использовании `.camel` нет необходимости, если используется строковыми шаблонами или `vue-loader`/`vueify`.