v-model फॉर्म इनपुट आणि स्थितीच्या एका भागामध्ये द्विमार्गी बाइंडिंग तयार करते: इनपुट स्थितीचे मूल्य दर्शवते, आणि इनपुट संपादित करणे स्थिती अपडेट करते — स्वयंचलितपणे, दोन्ही दिशांमध्ये।
<script setup>
import { ref } from "vue";
const name = ref("");
</script>
<template>
<input v-model="name" />
<p>You typed: {{ name }}</p> <!-- updates live as you type -->
</template>
हुडच्या खाली, बाइंड आणि श्रोता एकत्र करते:
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
तरी हे जादू नाही — फक्त bind-and-update पॅटर्नसाठी एक सुविधाजनक शॉर्टहँड।
<template>
<input v-model="text" /> <!-- text -->
<textarea v-model="message" />
<input type="checkbox" v-model="agreed" /> <!-- boolean -->
<input type="radio" value="a" v-model="choice" />
<select v-model="selected">...</select>
</template>
Vue प्रत्येक नियंत्रण प्रकारसाठी योग्य संपत्ती/इव्हेंट निवडते (value/input, checked/change, इ.).
<input v-model.trim="name" /> <!-- auto-trim whitespace -->
<input v-model.number="age" /> <!-- cast to a number -->
<input v-model.lazy="text" /> <!-- sync on `change` instead of every keystroke -->
<!-- a component can support v-model via a `modelValue` prop + `update:modelValue` event -->
<CustomInput v-model="name" />
<!-- equivalent to :model-value="name" @update:model-value="name = $event" -->
हे आपल्याला पुनः वापरण्यायोग्य इनपुट घटक तयार करण्यास अनुमती देते जे v-model सह कार्य करतात नेहमीच्या इनपुट प्रमाणे (Vue 3 अगदी एकाधिक नावांकित v-models समर्थन करते: v-model:title, v-model:body)।
v-model Vue मध्ये फॉर्मचा कोनस्तंभ आहे — द्विमार्गी डेटा प्रवाहासाठी व्यक्तिगत मूल्य-बाइंडिंग + इव्हेंट-हँडलिंग बॉयलरप्लेट काढून टाकते।
हे समजणे की ते :value + @input मध्ये desugars होते त्याला रहस्यमुक्त करते आणि आपल्या स्वतःच्या घटकांवर v-model कसे लागू करायचे हे स्पष्ट करते, तर संशोधक (.trim/.number/.lazy) सामान्य इनपुट-प्रोसेसिंग गरजा घोषणात्मकपणे हाताळतात।
सविस्तर उत्तरांसह IT मुलाखत प्रश्नांचे ग्रंथालय — Junior पासून Senior पर्यंत.
देणगी द्या