v-model tạo binding hai chiều giữa một input của form và một phần state: input hiển thị giá trị của state, và việc chỉnh sửa input cập nhật state — tự động, theo cả hai chiều.
<script setup>
import { ref } from "vue";
const name = ref("");
</script>
<template>
<input v-model="name" />
<p>You typed: {{ name }}</p> <!-- cập nhật trực tiếp khi bạn gõ -->
</template>
Bên dưới, kết hợp một bind và một listener :
v-model:value@input<!-- hai dòng này tương đương -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
Vậy nó không phải phép màu — chỉ là một viết tắt tiện lợi cho mẫu bind-và-cập-nhật.
<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 chọn đúng thuộc tính/sự kiện cho từng loại control (value/input, checked/change, v.v.).
<input v-model.trim="name" /> <!-- tự cắt khoảng trắng -->
<input v-model.number="age" /> <!-- ép kiểu sang số -->
<input v-model.lazy="text" /> <!-- đồng bộ khi `change` thay vì mỗi lần gõ phím -->
<!-- một component có thể hỗ trợ v-model qua prop `modelValue` + sự kiện `update:modelValue` -->
<CustomInput v-model="name" />
<!-- tương đương :model-value="name" @update:model-value="name = $event" -->
Điều này cho phép bạn xây dựng các component input tái sử dụng hoạt động với v-model như input native (Vue 3 thậm chí hỗ trợ nhiều v-model có tên: v-model:title, v-model:body).
v-model là nền tảng của form trong Vue — nó loại bỏ boilerplate bind giá trị + xử lý sự kiện thủ công cho luồng dữ liệu hai chiều.
Hiểu rằng nó được desugar thành :value + @input giúp làm sáng tỏ nó và giải thích cách triển khai v-model trên component của riêng bạn, trong khi các modifier (.trim/.number/.lazy) xử lý các nhu cầu xử lý input phổ biến một cách khai báo.