v-bind ایک HTML attribute (یا component prop) کو JavaScript expression سے dynamic طریقے سے bind کرتا ہے، تاکہ جب data تبدیل ہو تو attribute reactively update ہو۔ اس کی shorthand صرف : ہے۔
<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>
:src="imageUrl" اور src="imageUrl" کے درمیان فرق بہت اہم ہے: بغیر : کے، یہ literal string ہے؛ اس کے ساتھ، Vue expression کو evaluate کرتا ہے۔
Classes اور styles کو bind کرنا (خصوصی handling)
<template>
<div :class="{ active: isActive, error: hasError }"></div> <!-- object: toggle classes -->
<div :class="[baseClass, isActive ? 'on' : '']"></div> <!-- array -->
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>
</template>
Vue :class اور :style کو special object/array syntax دیتا ہے تاکہ conditionally classes اور inline styles کو apply کیا جا سکے۔
پورے attributes کا object bind کرنا
<template>
<!-- spread all properties of an object as attributes/props -->
<input v-bind="inputAttrs" />
<!-- inputAttrs = { type: 'text', placeholder: 'Name', required: true } -->
</template>
v-bind بغیر کسی argument کے ایک object کی keys کو multiple attributes کے طور پر spread کرتا ہے — بہت سے props کو ایک ساتھ pass کرنے کے لیے مفید ہے۔
Components کو props pass کرنا
<UserCard :user="currentUser" :is-admin="true" />
یہی :prop syntax child components میں data pass کرتا ہے (نہ صرف DOM attributes)۔
اہمیت
v-bind (:) یہ ہے کہ آپ attributes اور props کو dynamic اور reactive کیسے بناتے ہیں — یہ content کے لیے {{ }} کا counterpart ہے۔
یہ ہمیشہ استعمال ہوتا ہے: src/href/disabled bind کرنا، conditional :class/:style، اور components کو props pass کرنا۔
Class/style کے لیے object/array syntaxes اور object-spread form کو جاننا تقریباً تمام attribute-binding ضروریات کو cover کرتا ہے۔