Inputs पर v-model
अलग input types अलग तरीके से bind होते हैं, और .trim, .number, और .lazy जैसे modifiers behaviour fine-tune करते हैं।
In this page:
Syntax
<input v-model.trim="text">
<input v-model.number="number">
<textarea v-model="text"></textarea>Inputs पर v-model
Text inputs और textareas strings bind करते हैं। whitespace strip करने के लिए .trim, एक number में convert करने के लिए .number, और input की बजाय change पर update करने के लिए .lazy add करें। ध्यान दें कि एक textarea में multi-line text tags के अंदर interpolation की बजाय v-model इस्तेमाल करता है।
Note:
type="number" inputs फिर भी strings देते हैं जब तक आप .number add न करें।
उदाहरण: v-model on inputs
<!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.trim="title">
<input v-model.number="age">
<textarea v-model="bio"></textarea>
<p>[{{ title }}] {{ typeof age }} {{ age }}</p>
</div>
<script>
Vue.createApp({ data() { return { title: "", age: 0, bio: "" }; } }).mount("#app");
const [t, a] = document.querySelectorAll("input");
t.value = " padded "; t.dispatchEvent(new window.Event("input"));
a.value = "42"; a.dispatchEvent(new window.Event("input"));
Vue.nextTick(() => console.log(document.querySelector("p").textContent));
</script>
</body>
</html>
<!-- Output:
Rendered: [padded] number 42
console: [padded] number 42
-->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. #}
आम गलतियां
- textarea के अंदर interpolate करना
- .number भूल जाना और strings compare करना
- .lazy इस्तेमाल करना और live updates की उम्मीद करना
चैप्टर सारांश
- .trim whitespace remove करता है
- .number एक number में convert करता है
- .lazy change पर update करता है
- textarea v-model इस्तेमाल करता है
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: