Vue 表单输入 v-model
学习 v-model 实现文本框、复选框、单选框、下拉框的数据双向绑定 · 难度：入门 · +20XP
v-model — 表单双向绑定
v-model 让表单输入和数据之间自动双向同步：
- 你在输入框里打字 → 数据自动更新
- 你修改数据 → 输入框里的文字自动更新
不需要写任何监听输入事件的代码，Vue 帮你搞定了。
文本框
<input v-model="name" placeholder="输入姓名">
<p>你好，{{ name }}！</p>在输入框里打字，下面立刻显示"你好，XXX！"。
多行文本框
<textarea v-model="bio" placeholder="介绍你自己"></textarea>
<p>已输入 {{ bio.length }} 个字</p>复选框
单个复选框（v-model 是布尔值）：
<input type="checkbox" v-model="agree"> 我同意协议
<button :disabled="!agree">下一步</button>多个复选框（v-model 是数组）：
<input type="checkbox" v-model="hobbies" value="读书"> 读书
<input type="checkbox" v-model="hobbies" value="运动"> 运动
<input type="checkbox" v-model="hobbies" value="编程"> 编程
<p>你选了：{{ hobbies.join("、") }}</p>单选按钮
<input type="radio" v-model="gender" value="男"> 男
<input type="radio" v-model="gender" value="女"> 女下拉选择
<select v-model="city">
<option value="">请选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>v-model 修饰符
| 修饰符 | 作用 | 例子 |
|---|---|---|
.lazy | 不实时更新，等输完再更新 | v-model.lazy="msg" |
.number | 自动转成数字类型 | v-model.number="age" |
.trim | 自动去掉前后空格 | v-model.trim="name" |
动手试试
- 在右边表单里填信息，看下面的预览区实时变化
- 试试去掉姓名输入框前后加空格，看 .trim 的效果
- 试试不勾选"同意"，看提交按钮的状态变化