:attribute="value"

Version	Phase	Default	Multiple
	51 — ATTRIBUTE	$<attribute>	Yes

Bind an element's attribute value.

<a :href="url">
  <!--...-->
</a>

Notes

Note

Binding directives is not officially supported and is considered undefined behaviour.

[!WARNING] :class and :style have specific handling described below.

Note

Bind multiple attributes in a single directive using the shorthand :="object" (e.g. :="{ foo: 'bar', bar: true }").

Note

The directive value may be omitted to bind an attribute to an identifier with the same name (after « camelCase » conversion if the attribute contains hyphens « - ») in the current context. (e.g., :data-foo is equivalent to :data-foo="dataFoo").

Note

Boolean attributes defined by the HTML spec are handled accordingly (removed when falsy).

Note

Attributes with null or undefined values are removed.

:class="value"

Version	Phase	Default	Multiple
	51 — ATTRIBUTE	$<attribute>	Yes

Bind an element's class attribute.

<p :class="{ foo: true, bar: false }">
  <!--...-->
</p>

Notes

Note

The expression can be:

• A string of space-separated class names (e.g., "foo bar").
• A Record<PropertyKey, boolean> mapping class names to their state (e.g., { foo: true, bar: false }).
• An Array of the supported types (e.g., [ "foo", { bar: false }, [] ]).

Note

The initial class attribute value is preserved.

Note

Class names with at least one truthy value are treated as active.

:style="value"

Version	Phase	Default	Multiple
	51 — ATTRIBUTE	$<attribute>	Yes

Bind an element's style attribute.

<p :style="{ color: 'salmon' }">
  <!--...-->
</p>

Notes

Note

The expression can be:

• A string supported by HTMLElement.style.cssText (e.g., "color: blue;").
• A Record<PropertyKey, unknown> mapping CSS properties to their values (e.g., { backgroundColor: "red", "border-color": "green", width: 1 }).
  • Use « camelCase » instead of « kebab-case » to avoid escaping CSS property names.
  • Values of type number are implicitly converted to px units when applicable ( HTMLElement.style.setProperty() will be called with "px" appended).
• An Array of the supported types (e.g., [ "color: blue", { backgroundColor: "red" }, [] ]).

Note

The initial style attribute value is preserved.

Note

CSS properties are processed in the order they are defined, regardless of !important.