v-model双向绑定

v-model 是 Vue 表单数据绑定的核心指令。

基本用法

HTML

<input v-model="message" />
<p>{{ message }}</p>

v-model 本质上是 :value + @input 的语法糖。

不同表单元素

文本框

HTML

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

复选框

HTML

<!-- 单个复选框，绑定布尔值 -->
<input type="checkbox" v-model="checked" />

<!-- 多个复选框，绑定数组 -->
<input type="checkbox" v-model="selected" value="A" />
<input type="checkbox" v-model="selected" value="B" />

单选按钮

HTML

<input type="radio" v-model="picked" value="One" />
<input type="radio" v-model="picked" value="Two" />

下拉选择

HTML

<select v-model="selected">
  <option value="">请选择</option>
  <option value="A">选项A</option>
</select>

修饰符

HTML

<!-- 转为数字类型 -->
<input v-model.number="age" />

<!-- 去除首尾空格 -->
<input v-model.trim="name" />

<!-- 延迟更新（change事件触发） -->
<input v-model.lazy="msg" />

要点总结

v-model 实现表单元素与数据的双向绑定
不同类型元素自动选择正确的属性绑定
修饰符 .number、.trim、.lazy 控制绑定行为
本质是 :value + @input 的简写