Vue 的 v-model 指令详解

Vue 的 v-model 指令详解

v-model 是 Vue 中最强大的指令之一，用于在表单输入元素和组件上创建双向数据绑定。它本质上是一个语法糖，自动处理了数据更新和事件监听的逻辑。v-model只能使用在表单类元素上，例如：input标签、select标签、textarea标签。

<!-- 基础用法 -->
<input v-model="message">
<p>输入的内容：{{ message }}</p>

---

一、核心工作原理

v-model 在底层由两部分组成：

1. 数据绑定：使用 v-bind 绑定元素的 value 属性
2. 事件监听：使用 v-on 监听输入事件并更新数据

<!-- 等价于 -->
<input :value="message"@input="message = $event.target.value"
>

---

二、在不同表单元素上的行为

元素类型	绑定属性	监听事件	特殊处理
文本输入框	value	input	-
多行文本框	value	input	-
复选框	checked	change	单个绑定布尔值，多个绑定数组
单选按钮	checked	change	绑定选中的值
下拉选择框	value	change	绑定选中项的 value

具体示例：

1. 文本/多行输入

   <input type="text" v-model="text">
   <textarea v-model="text"></textarea>
   

2. 复选框

   <!-- 单个复选框 -->
   <input type="checkbox" v-model="isChecked"><!-- 多个复选框 -->
   <input type="checkbox" value="vue" v-model="skills">
   <input type="checkbox" value="react" v-model="skills">
   

3. 单选按钮

   <input type="radio" value="male" v-model="gender">
   <input type="radio" value