v-bind ਇੱਕ HTML attribute (ਜਾਂ component prop) ਨੂੰ ਇੱਕ JavaScript expression ਨਾਲ ਗਤੀਸ਼ੀਲ ਤਰੀਕੇ ਨਾਲ ਬੰਨ੍ਹਦਾ ਹੈ, ਤਾਂ ਕਿ attribute ਡੇਟਾ ਬਦਲਣ ਸਮੇਂ reactively ਅਪਡੇਟ ਹੋ। ਇਸ ਦਾ shorthand ਸਿਰਫ਼ : ਹੈ।
vue
<script setup>
import { ref } from "vue";
const imageUrl = ref("/photo.jpg");
const isDisabled = ref(true);
const id = ref("main");
</script>
<template>
<img v-bind:src="imageUrl" /> <!-- full syntax -->
<img :src="imageUrl" /> <!-- shorthand (idiomatic) -->
<button :disabled="isDisabled">Save</button>
<div :id="id" :data-index="5">...</div>
</template>