【Vue.js基础教程】第9章：v-model 表单输入绑定详解：从文本框到自定义组件

代码简单说

发布于 2026-06-16 14:14:29

710

文章被收录于专栏：代码简单说代码简单说

v-model 表单输入绑定详解：从文本框到自定义组件

你有没有碰到过这样的场景：用户在页面上填写表单，结果你要写一大堆代码来同步这些输入值？别急，Vue 的 v-model 可以帮你解决这个问题！

什么是 v-model？

v-model 是 Vue 提供的一个指令，用来实现双向绑定数据和表单输入的简单语法糖。无论是文本框、复选框，还是选择框，v-model 都能轻松搞定！

本质是什么？ v-model 的本质是：监听用户输入事件并动态更新数据。同时，它也能处理一些极端场景，比如中文输入法的组合文字。

常见表单场景：代码就是答案

1. 文本框

<input v-model="message" placeholder="请输入内容">
<p>你输入的是：{{ message }}</p>

2. 多行文本

<textarea v-model="multilineText" placeholder="写点什么吧"></textarea>
<p style="white-space: pre-line;">你写了：{{ multilineText }}</p>

3. 单选按钮

<input type="radio" id="male" value="男" v-model="gender">
<label for="male">男</label>

<input type="radio" id="female" value="女" v-model="gender">
<label for="female">女</label>

<p>你的性别是：{{ gender }}</p>

4. 复选框

单选

<input type="checkbox" v-model="isAgree">
<p>同意协议：{{ isAgree ? '是' : '否' }}</p>

多选

<input type="checkbox" value="Vue" v-model="selectedFrameworks"> Vue
<input type="checkbox" value="React" v-model="selectedFrameworks"> React
<input type="checkbox" value="Angular" v-model="selectedFrameworks"> Angular

<p>你选择了：{{ selectedFrameworks.join(', ') }}</p>

5. 下拉选择框

单选

<select v-model="selectedOption">
  <option disabled value="">请选择</option>
  <option value="A">选项 A</option>
  <option value="B">选项 B</option>
  <option value="C">选项 C</option>
</select>
<p>你选择了：{{ selectedOption }}</p>

多选

<select v-model="selectedOptions" multiple>
  <option value="A">选项 A</option>
  <option value="B">选项 B</option>
  <option value="C">选项 C</option>
</select>
<p>你选择了：{{ selectedOptions.join(', ') }}</p>

高级技巧：让表单更智能

1. 值绑定

绑定动态值

<input type="checkbox" v-model="toggle" true-value="Yes" false-value="No">
<p>状态：{{ toggle }}</p>

绑定对象

<select v-model="selectedObject">
  <option :value="{ id: 1, name: 'Vue' }">Vue</option>
  <option :value="{ id: 2, name: 'React' }">React</option>
</select>
<p>你选择了：{{ selectedObject.name }}</p>

2. 修饰符

.lazy：仅在 change 事件时同步数据。
.number：将输入值自动转为数字。
.trim：自动移除首尾空格。

<input v-model.lazy="lazyInput" placeholder="Change 时更新">
<input v-model.number="numericInput" type="number" placeholder="数字输入">
<input v-model.trim="trimmedInput" placeholder="去除首尾空格">