Attributes

Watch "Binding attributes with v-bind" on LinkedIn Learning

Follow along with this video on CodePen

It is sometime necessary to place dynamic values inside HTML attribute. However, in this case the mustache syntax will not work. Instead, it is necessary to use the v-bind directive.

<a v-bind:href="link">Dynamic Link</a>

In the case of boolean attributes, where there existence implies true, v-bind will not render the attribute if the value is null, undefined, or false.

<button v-bind:disabled="isDisabled">Button</button>

NOTE

The shorthand for v-bind is the colon (:)

Try it yourself on CodePen