v-bind

v-bind

• Сокращение: :

• Принимает: any (если указан параметр) | Object (если параметр не указан)

• Параметр: attrOrProp (опционально)

• Модификаторы:

  • .prop — используется для связывания в качестве DOM-свойства, а не атрибута. Если тег является компонентом, то .prop будет устанавливать свойство на $el компонента.

  • .camel — преобразует имена атрибутов из kebab-case в camelCase.

  • .sync — синтаксический сахар, который будет преобразован в обработчик v-on для обновления связанного значения.

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

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

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

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

<!-- связывание атрибута -->
<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:

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

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