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" />
కాబట్టి ఇది మేజిక్ కాదు — బైండ్-ఆండ్-అప్డేట్ నమూనాకు కేవలం స편ఖ్య సంక్షిప్త నిర్వచనం.
<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 ప్రతి నియంత్రణ రకానికి సరైన ఆస్తి/ఇవెంట్ ఎంచుకుంటుంది (విలువ/ఇన్పుట్, సరిచేసిన/మార్పు, మొదలైనవి).
<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 అని అర్థం చేసుకోవడం దీనిని demystify చేస్తుంది మరియు మీ సొంత భాగాలపై v-model ను ఎలా అమలు చేయాలో వివరిస్తుంది, సవరణలు (.trim/.number/.lazy) సాధారణ ఇన్పుట్-ప్రాసెసింగ్ అవసరాలను ప్రకటనాత్మకంగా నిర్వహిస్తాయి.