v-model yana ƙirƙira haɗin giddobi tsakanin shigarwar ninka da sashin ƙila: shigarwar tana nuna ƙimar ƙila, kuma gyaran shigarwar yana sabunta ƙila — ta atomatik, a duka bangare gida.
<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>
A ƙarƙashin ruwan, yana haɗi daɗɗi haɗi da mai saurare :
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
Don haka ba ruɗi ne — kawai takaici mai sauya jiya don naka-saɗa da saɗa naka.
<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 yana zaɓi kadai amin/abin wadata don kowane nau'in sarki (ƙima/shigarwa, haɓaka/canja, jne).
<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" -->
Wanan yana ba da damar ka ƙirƙira abubuwan shigarwa da za a iya sake amfani da su waɗanda suke aiki tare da v-model kamar shigarwar asali (Vue 3 ya ma tallafawa v-models marasa jiya: v-model:title, v-model:body).
v-model shine ganya na ninka a Vue — ta kawar da shiftin lissafi na haɗi ƙima + shakatawa abin wadata para haɗin giddobi na bayani.
Tunanin cewa ya ruɗi zuwa :value + @input yana bayyana shi kuma yana kashewa yadda ake aiki v-model a kan abubuwan ku na duka, yayin da masu gyada (.trim/.number/.lazy) suke shakatawa bukatun sasshen-jiya na gida ta hanya ta kasancewa.