v-model के Basics
v-model एक form input को data के एक piece से दोनों directions में link करता है।
In this page:
Syntax
<input v-model="property">
<p>{{ property }}</p>v-model Basics
v-model value bind करने और input events सुनने के लिए sugar है। Type करना data update करता है और data बदलना input update करता है। यह text inputs, textareas, checkboxes, radios, और selects पर काम करता है, हर एक के लिए सही property और event चुनते हुए।
Note:
v-model initial value attribute ignore करता है; initial value data में set करें।
उदाहरण: v-model basics
<!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">
<input v-model="name" placeholder="Your name">
<p>Hello, {{ name || "stranger" }}!</p>
</div>
<script>
Vue.createApp({ data() { return { name: "" }; } }).mount("#app");
const input = document.querySelector("input");
input.value = "Ada";
input.dispatchEvent(new window.Event("input"));
Vue.nextTick(() => console.log(document.querySelector("p").textContent));
</script>
</body>
</html>
<!-- Output:
Rendered: Hello, Ada!
console: Hello, Ada!
-->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. #}
आम गलतियां
- एक initial value attribute इस्तेमाल करना
- यह उम्मीद करना कि v-model non-form elements पर काम करेगा
- data property declare करना भूल जाना
चैप्टर सारांश
- v-model two-way binding है
- Inputs, textareas, selects पर काम करता है
- Data initial value hold करता है
- :value plus @input के लिए Sugar
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: