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 เลือกคุณสมบัติ/เหตุการณ์ที่ถูกต้องสำหรับแต่ละประเภทของตัวควบคุม (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 ทำให้ลึกลับเสียและอธิบายวิธีการใช้งาน v-model บนส่วนประกอบของคุณเอง ขณะที่ตัวแก้ไข (.trim/.number/.lazy) จัดการความต้องการในการประมวลผลอินพุตทั่วไปในลักษณะที่ประกาศไว้