v-bind का उपयोग
v-bind एक HTML attribute को आपके data से connect करता है, और इसका shorthand एक single colon है।
In this page:
Syntax
<img v-bind:src="expression">
<a :href="expression">link</a>
<button :disabled="condition">text</button>v-bind
src, href, disabled, और class जैसे attributes को expressions से bind करने के लिए v-bind:attr या :attr इस्तेमाल करें। false, null, या undefined से bind करना attribute remove कर देता है।
Object syntax एक साथ कई attributes bind करता है, और class और style में objects और arrays के लिए special helpers हैं।
Note:
v-bind:id="id" के short form की तरह :id="id" लिखें।
उदाहरण: v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<a :href="url" :title="label">Docs</a>
<button :disabled="busy">Save</button>
<p :class="{ active: isActive, muted: !isActive }">status</p>
<p :style="{ color: color, fontSize: size + 'px' }">styled</p>
</div>
<script>
Vue.createApp({
data() { return { url: "https://vuejs.org", label: "Vue docs", busy: true, isActive: true, color: "green", size: 18 }; },
}).mount("#app");
Vue.nextTick(() => {
const a = document.querySelector("a");
console.log(a.getAttribute("href"), document.querySelector("button").disabled, document.querySelector("p").className);
});
</script>
</body>
</html>
<!-- Output:
Rendered: DocsSavestatusstyled
console: https://vuejs.org true active
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- attr="{{ value }}" लिखना जो काम नहीं करता
- यह भूल जाना कि false होने पर boolean attributes remove हो जाते हैं
- objects की बजाय class strings bind करना
चैप्टर सारांश
- :attr, v-bind:attr का shorthand है
- false या null एक attribute remove करता है
- Object syntax कई attributes bind करता है
- Class और style objects accept करते हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: