`v-bind`

Dynamically binds attributes, props, class, or style to expressions.

Since Vue 3.0 Spec ↗

Syntax

:attr="expr" | v-bind="object" | :class | :style

Parameters

Name	Type	Required	Description
`value`	`any`	No	The expression bound to the target attribute or prop.

Returns

directive — Keeps the attribute/prop in sync.

Examples

<script setup lang="ts">
import { ref } from 'vue';
const url = ref('/a.png');
const isActive = ref(true);
const attrs = { id: 'main', 'data-x': 1 };
</script>

<template>
  <img :src="url" :alt="'photo'" />
  <div :class="{ active: isActive }" :style="{ color: 'red' }"></div>
  <section v-bind="attrs"></section>
</template>

Notes

The shorthand is `:`. Binding `:class` accepts an object or array for conditional classes; `:style` accepts an object of CSS properties. `v-bind="obj"` spreads multiple attributes at once. Use `.prop`/`.attr` modifiers to force DOM property vs. attribute.