Directive v-bind

Dynamically bind one or more attributes, or a
component prop to an expression.

Shorthand: : or . (when using .prop modifier)
Expects: any (with argument) | Object (without argument)
Argument: attrOrProp (optional)
Modifiers:
.camel - transform the kebab-case attribute name into camelCase. .prop - force a binding to be set as a DOM property. 3.2+ .attr - force a binding to be set as a DOM attribute. 3.2+

When used for component prop binding, the prop
must be properly declared in the child component.

When used without an argument, can be used to
bind an object containing attribute name-value pairs.

<!-- bind an attribute -->
<img v-bind:src="imageSrc" />

<!-- dynamic attribute name -->
<button v-bind:[key]="value"></button>

<!-- shorthand -->
<img :src="imageSrc" />

<!-- shorthand dynamic attribute name -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName" />

<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop binding. "prop" must be declared in the child component. -->
<MyComponent :prop="someThing" />

<!-- pass down parent props in common with a child component -->
<MyComponent v-bind="$props" />

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

The .prop modifier also has a dedicated shorthand, .:

<div :someProperty.prop="someObject"></div>

<!-- equivalent to -->
<div .someProperty="someObject"></div>