Text

Pass plain text string.

<a href="https://example.com">...</a>

<input type="textarea" />

JS

Pass a JS expression. The second form is the same but shorter.

v-bind:VARNAME="EXPRESSION"

:VARNAME="EXPRESSION"

e.g. Variable url set on data.

<a v-bind:href="url">...</a>
<a :href="url">...</a>

e.g. Function call.

<a :href="my_var.toLowerCase()">...</a>

A literal value like a number or boolean.

<input :foo="123" />
<input :foo="false" />

Note that even though this looks like a number, without v-bind this is just a string.

<input foo="123" />

Boolean

You can pass custom attributes. This value will be true

<input isRequired />

Here is an equivalent as JS expression. Note use of v-bind to pass a boolean of true and not a string that says "true".

<input :isRequired="true" />

Note that plain HTML already supports booleans. Like either of these. But the value of true will probably just be a string if you try and use it for Vue purposes and not plain HTML purposes.

<input required />

<input required="true"/>

Class and style

See Class and style bindings in the docs.

Class

Referenced:

<div :class="classObject"></div>

Inline:

<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>

Where isActive and hasError are booleans in data.

Style

<span :style="{ marginLeft: '.5em' }"></span>