快速入门Vue的v-model表单绑定：语法糖、动态值、修饰符的小技巧你都掌握了吗？

url: /posts/6be38de6382e31d282659b689c5b17f0/
title: 快速入门Vue的v-model表单绑定：语法糖、动态值、修饰符的小技巧你都掌握了吗？
date: 2025-11-01T07:37:23+08:00
lastmod: 2025-11-01T07:37:23+08:00
author: cmdragon

summary:

v-model是Vue中简化表单输入的语法糖，自动同步输入值与组件状态。它根据输入类型适配DOM属性和事件：文本/多行文本用
value和
input，复选框/单选框用
checked和
change，选择器用
value和
change。
v-model支持修饰符如
.lazy（延迟同步）、
.number（转为数字）、
.trim（去除首尾空格）。动态值绑定可通过
v-bind实现，如复选框的
true-value和
false-value，单选框的动态值，选择器的对象值。常见问题包括iOS选择器无法选中第一个选项、IME输入不更新等，均有相应解决方案。

categories:

vue

tags:

基础入门
Vue.js v-model表单绑定动态值处理修饰符常见报错解决

扫描二维码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长

发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/

一、v-model：表单绑定的语法糖

在Vue中处理表单输入时，我们需要将输入值与组件状态同步。手动实现需绑定
value属性并监听
input/
change事件，而
v-model是简化这一过程的语法糖——它自动完成“值绑定+事件监听”，让代码更简洁。


v-model的核心逻辑是：

<!-- v-model="data" 等价于 -->
<input :value="data" @input="data = $event.target.value" />

它会根据输入类型自动适配DOM属性和事件：

文本/多行文本：
value属性 +
input事件复选框/单选框：
checked属性 +
change事件选择器：
value属性 +
change事件

1.1 文本输入：单行与多行

单行文本

最基础的输入类型，
v-model直接绑定响应式变量：

<template>
  <!-- 实时显示输入内容 -->
  <p>输入的内容：{{ message }}</p>
  <!-- v-model同步输入与message -->
  <input v-model="message" placeholder="请输入" />
</template>

<script setup>
import { ref } from 'vue'
// 初始值在JS侧声明（而非DOM的value属性）
const message = ref('') 
</script>

多行文本


<textarea>需用
v-model绑定（不能用插值
{{ }}）：

<template>
  <!-- 保留换行符（white-space: pre-line） -->
  <p>多行内容：{{ message }}</p>
  <textarea v-model="message" placeholder="请输入多行内容"></textarea>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

1.2 复选框：布尔值与数组

单个复选框

绑定布尔值，适用于“同意协议”等场景：

<template>
  <input type="checkbox" v-model="isAgreed" />
  <label for="agree">{{ isAgreed ? '已同意' : '未同意' }}</label>
</template>

<script setup>
import { ref } from 'vue'
const isAgreed = ref(false) // 初始未同意
</script>

多个复选框

绑定数组，选中的项会自动加入数组：

<template>
  <div>选中的名字：{{ checkedNames }}</div>
  <input type="checkbox" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" value="John" v-model="checkedNames" />
  <label for="john">John</label>
</template>

<script setup>
import { ref } from 'vue'
const checkedNames = ref([]) // 初始为空数组
</script>

1.3 单选框：互斥选择的绑定

单选框组绑定到同一个变量，选中的
value会赋值给变量：

<template>
  <div>选中的选项：{{ picked }}</div>
  <input type="radio" value="One" v-model="picked" />
  <label for="one">One</label>
  <input type="radio" value="Two" v-model="picked" />
  <label for="two">Two</label>
</template>

<script setup>
import { ref } from 'vue'
const picked = ref('One') // 初始选中One
</script>

1.4 选择器：单选与多选

单选选择器


v-model绑定字符串，需添加
disabled的空值选项（解决iOS兼容问题）：

<template>
  <div>选中的选项：{{ selected }}</div>
  <select v-model="selected">
    <!-- 解决iOS无法选第一个选项的问题 -->
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

<script setup>
import { ref } from 'vue'
const selected = ref('') // 初始为空
</script>

多选选择器

添加
multiple属性，
v-model绑定数组：

<template>
  <div>选中的选项：{{ selected }}</div>
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

<script setup>
import { ref } from 'vue'
const selected = ref([]) // 初始为空数组
</script>

动态选项

用
v-for渲染动态选项（常见于从接口获取数据的场景）：

<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script setup>
import { ref } from 'vue'
const selected = ref('A')
// 动态选项列表（可从接口获取）
const options = ref([
  { text: '选项一', value: 'A' },
  { text: '选项二', value: 'B' },
  { text: '选项三', value: 'C' }
])
</script>

二、值绑定：动态值的处理

默认情况下，
v-model的
value是静态字符串/布尔值，但有时需要绑定动态值（如组件属性、对象），这时需用
v-bind（或简写
:）。

2.1 复选框的动态true/false值

用
true-value和
false-value指定选中/未选中时的值（非布尔值）：

<template>
  <input 
    type="checkbox" 
    v-model="toggle" 
    true-value="yes" 
    false-value="no"
  />
  <p>当前值：{{ toggle }}</p> <!-- 选中为"yes"，未选中为"no" -->
</template>

<script setup>
import { ref } from 'vue'
const toggle = ref('no') // 初始未选中
</script>

2.2 单选框的动态值

绑定
value到组件的动态属性（如接口返回的值）：

<template>
  <input type="radio" v-model="pick" :value="option1" />
  <label>选项一</label>
  <input type="radio" v-model="pick" :value="option2" />
  <label>选项二</label>
  <p>选中的值：{{ pick }}</p>
</template>

<script setup>
import { ref } from 'vue'
// 动态值（可从接口获取）
const option1 = ref('动态值1')
const option2 = ref('动态值2')
const pick = ref(option1.value) // 初始选中选项一
</script>

2.3 选择器的对象值


option的
value可以是对象（传递更多信息）：

<template>
  <select v-model="selected">
    <option :value="{ id: 1, name: '张三' }">张三</option>
    <option :value="{ id: 2, name: '李四' }">李四</option>
  </select>
  <p>选中的用户：{{ selected.name }}</p> <!-- 显示用户名 -->
</template>

<script setup>
import { ref } from 'vue'
const selected = ref({ id: 1, name: '张三' }) // 初始选中张三
</script>

三、修饰符：定制v-model的行为


v-model提供三个修饰符，调整同步时机或值的处理：

3.1 .lazy：延迟同步到change事件

默认
v-model在
input事件（每输入一个字符）同步，
lazy改为在
change事件（输入完成、失去焦点或回车）同步：

<template>
  <input v-model.lazy="msg" placeholder="输入完成后同步" />
  <p>当前值：{{ msg }}</p> <!-- 失去焦点后才更新 -->
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

3.2 .number：自动转换为数字

自动将输入值转为
Number类型（适用于数字输入）：

<template>
  <input v-model.number="age" type="number" placeholder="请输入年龄" />
  <p>年龄类型：{{ typeof age }}</p> <!-- 输入数字时为"number" -->
</template>

<script setup>
import { ref } from 'vue'
const age = ref(0) // 初始值为数字
</script>

3.3 .trim：自动去除首尾空格

自动去除输入值的首尾空格：

<template>
  <input v-model.trim="msg" placeholder="输入带空格的内容" />
  <p>处理后的值："{{ msg }}"</p> <!-- 首尾空格被去除 -->
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

四、课后Quiz：巩固你的理解

问题1


v-model在文本输入框和复选框上分别对应哪些DOM属性和事件？
答案：

文本输入框：
value属性 +
input事件；复选框：
checked属性 +
change事件。

问题2

如何让
v-model绑定的复选框值为
"yes"或
"no"，而不是布尔值？
答案：
使用
true-value和
false-value属性：

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

问题3


.lazy修饰符的作用是什么？请写出使用
.lazy的
v-model示例。
答案：
作用：将同步时机从
input事件改为
change事件（输入完成后同步）。
示例：

<input v-model.lazy="msg" />

问题4

为什么
<select>元素需要添加一个
disabled的空值选项？
答案：
若初始值不匹配任何选项，iOS会无法选中第一个选项（iOS不触发
change事件）。添加空值选项可解决：

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

五、常见报错与解决

5.1 选择器无法选中第一个选项（iOS）

现象：iOS设备上，
<select>的第一个选项无法选中。
原因：初始值不匹配任何选项，iOS不触发
change事件。
解决：添加
disabled的空值选项（见1.4节单选选择器示例）。

5.2 IME输入时v-model不更新

现象：输入中文、日文等需IME的语言时，
v-model在组合过程中不更新。
原因：
v-model默认忽略IME组合时的输入。
解决：手动绑定
input事件和
value：

<template>
  <input :value="msg" @input="msg = $event.target.value" />
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

5.3 输入数字但得到字符串

现象：输入数字后，变量类型是
string而非
number。
原因：
v-model默认保留原始输入类型（字符串）。
解决：添加
number修饰符：

<input v-model.number="age" type="number" />

参考链接：
https://vuejs.org/guide/essentials/forms.html

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长，阅读完整的文章：快速入门Vue的v-model表单绑定：语法糖、动态值、修饰符的小技巧你都掌握了吗？

往期文章归档
快速入门Vue3：条件渲染与列表渲染的小秘密，你居然还不知道？ – cmdragon’s Blog快速入门Vue3事件处理的挑战题：v-on、修饰符、自定义事件你能通关吗？ – cmdragon’s Blog快速入门Vue3的v-指令：数据和DOM的“翻译官”到底有多少本事？ – cmdragon’s Blog快速入门Vue3，插值、动态绑定和避坑技巧你都搞懂了吗？ – cmdragon’s Blog想让PostgreSQL快到飞起？先找健康密码还是先换引擎？ – cmdragon’s Blog想让PostgreSQL查询快到飞起？分区表、物化视图、并行查询这三招灵不灵？ – cmdragon’s Blog子查询总拖慢查询？把它变成连接就能解决？ – cmdragon’s BlogPostgreSQL全表扫描慢到崩溃？建索引+改查询+更统计信息三招能破？ – cmdragon’s Blog复杂查询总拖后腿？PostgreSQL多列索引+覆盖索引的神仙技巧你get没？ – cmdragon’s Blog只给表子集建索引？用函数结果建索引？PostgreSQL这俩操作凭啥能省空间又加速？ – cmdragon’s BlogB-tree索引像字典查词一样工作？那哪些数据库查询它能加速，哪些不能？ – cmdragon’s Blog想抓PostgreSQL里的慢SQL？pg_stat_statements基础黑匣子和pg_stat_monitor时间窗，谁能帮你更准揪出性能小偷？ – cmdragon’s BlogPostgreSQL的“时光机”MVCC和锁机制是怎么搞定高并发的？ – cmdragon’s BlogPostgreSQL性能暴涨的关键？内存IO并发参数居然要这么设置？ – cmdragon’s Blog大表查询慢到翻遍整个书架？PostgreSQL分区表教你怎么“分类”才高效PostgreSQL 查询慢？是不是忘了优化 GROUP BY、ORDER BY 和窗口函数？ – cmdragon’s BlogPostgreSQL里的子查询和CTE居然在性能上“掐架”？到底该站哪边？ – cmdragon’s BlogPostgreSQL选Join策略有啥小九九？Nested Loop/Merge/Hash谁是它的菜？ – cmdragon’s BlogPostgreSQL新手SQL总翻车？这7个性能陷阱你踩过没？ – cmdragon’s BlogPostgreSQL索引选B-Tree还是GiST？“瑞士军刀”和“多面手”的差别你居然还不知道？ – cmdragon’s Blog想知道数据库怎么给查询“算成本选路线”？EXPLAIN能帮你看明白？ – cmdragon’s BlogPostgreSQL处理SQL居然像做蛋糕？解析到执行的4步里藏着多少查询优化的小心机？ – cmdragon’s BlogPostgreSQL备份不是复制文件？物理vs逻辑咋选？误删还能精准恢复到1分钟前？ – cmdragon’s Blog转账不翻车、并发不干扰，PostgreSQL的ACID特性到底有啥魔法？ – cmdragon’s Blog银行转账不白扣钱、电商下单不超卖，PostgreSQL事务的诀窍是啥？ – cmdragon’s BlogPostgreSQL里的PL/pgSQL到底是啥？能让SQL从“说目标”变“讲步骤”？ – cmdragon’s BlogPostgreSQL视图不存数据？那它怎么简化查询还能递归生成序列和控制权限？ – cmdragon’s BlogPostgreSQL索引这么玩，才能让你的查询真的“飞”起来？ – cmdragon’s BlogPostgreSQL的表关系和约束，咋帮你搞定用户订单不混乱、学生选课不重复？ – cmdragon’s BlogPostgreSQL查询的筛子、排序、聚合、分组？你会用它们搞定数据吗？ – cmdragon’s BlogPostgreSQL数据类型怎么选才高效不踩坑？ – cmdragon’s Blog想解锁PostgreSQL查询从基础到进阶的核心知识点？你都get了吗？ – cmdragon’s BlogPostgreSQL DELETE居然有这些操作？返回数据、连表删你试过没？ – cmdragon’s BlogPostgreSQL UPDATE语句怎么玩？从改邮箱到批量更新的避坑技巧你都会吗？ – cmdragon’s BlogPostgreSQL插入数据还在逐条敲？批量、冲突处理、返回自增ID的技巧你会吗？ – cmdragon’s BlogPostgreSQL的“仓库-房间-货架”游戏，你能建出电商数据库和表吗？ – cmdragon’s BlogPostgreSQL 17安装总翻车？Windows/macOS/Linux避坑指南帮你搞定？ – cmdragon’s Blog能当关系型数据库还能玩对象特性，能拆复杂查询还能自动管库存，PostgreSQL凭什么这么香？ – cmdragon’s Blog给接口加新字段又不搞崩老客户端？FastAPI的多版本API靠哪三招实现？ – cmdragon’s Blog流量突增要搞崩FastAPI？熔断测试是怎么防系统雪崩的？ – cmdragon’s BlogFastAPI秒杀库存总变负数？Redis分布式锁能帮你守住底线吗 – cmdragon’s BlogFastAPI的CI流水线怎么自动测端点，还能让Allure报告美到犯规？ – cmdragon’s Blog如何用GitHub Actions为FastAPI项目打造自动化测试流水线？ – cmdragon’s Blog如何用Git Hook和CI流水线为FastAPI项目保驾护航？ – cmdragon’s BlogFastAPI如何用契约测试确保API的「菜单」与「菜品」一致？为什么TDD能让你的FastAPI开发飞起来？ – cmdragon’s Blog如何用FastAPI玩转多模块测试与异步任务，让代码不再“闹脾气”？ – cmdragon’s Blog如何在FastAPI中玩转“时光倒流”的数据库事务回滚测试？如何在FastAPI中优雅地模拟多模块集成测试？ – cmdragon’s Blog多环境配置切换机制能否让开发与生产无缝衔接？ – cmdragon’s Blog如何在 FastAPI 中巧妙覆盖依赖注入并拦截第三方服务调用？ – cmdragon’s Blog为什么你的单元测试需要Mock数据库才能飞起来？ – cmdragon’s Blog如何在FastAPI中巧妙隔离依赖项，让单元测试不再头疼？ – cmdragon’s Blog 免费好用的热门在线工具
RAID 计算器 – 应用商店 | By cmdragon在线PS – 应用商店 | By cmdragonMermaid 在线编辑器 – 应用商店 | By cmdragon数学求解计算器 – 应用商店 | By cmdragon智能提词器 – 应用商店 | By cmdragon魔法简历 – 应用商店 | By cmdragonImage Puzzle Tool – 图片拼图工具 | By cmdragon字幕下载工具 – 应用商店 | By cmdragon歌词生成工具 – 应用商店 | By cmdragon网盘资源聚合搜索 – 应用商店 | By cmdragonASCII字符画生成器 – 应用商店 | By cmdragonJSON Web Tokens 工具 – 应用商店 | By cmdragonBcrypt 密码工具 – 应用商店 | By cmdragonGIF 合成器 – 应用商店 | By cmdragonGIF 分解器 – 应用商店 | By cmdragon文本隐写术 – 应用商店 | By cmdragonCMDragon 在线工具 – 高级AI工具箱与开发者套件 | 免费好用的在线工具应用商店 – 发现1000+提升效率与开发的AI工具和实用程序 | 免费好用的在线工具CMDragon 更新日志 – 最新更新、功能与改进 | 免费好用的在线工具支持我们 – 成为赞助者 | 免费好用的在线工具AI文本生成图像 – 应用商店 | 免费好用的在线工具临时邮箱 – 应用商店 | 免费好用的在线工具二维码解析器 – 应用商店 | 免费好用的在线工具文本转思维导图 – 应用商店 | 免费好用的在线工具正则表达式可视化工具 – 应用商店 | 免费好用的在线工具文件隐写工具 – 应用商店 | 免费好用的在线工具IPTV 频道探索器 – 应用商店 | 免费好用的在线工具快传 – 应用商店 | 免费好用的在线工具随机抽奖工具 – 应用商店 | 免费好用的在线工具动漫场景查找器 – 应用商店 | 免费好用的在线工具时间工具箱 – 应用商店 | 免费好用的在线工具网速测试 – 应用商店 | 免费好用的在线工具AI 智能抠图工具 – 应用商店 | 免费好用的在线工具背景替换工具 – 应用商店 | 免费好用的在线工具艺术二维码生成器 – 应用商店 | 免费好用的在线工具Open Graph 元标签生成器 – 应用商店 | 免费好用的在线工具图像对比工具 – 应用商店 | 免费好用的在线工具图片压缩专业版 – 应用商店 | 免费好用的在线工具密码生成器 – 应用商店 | 免费好用的在线工具SVG优化器 – 应用商店 | 免费好用的在线工具调色板生成器 – 应用商店 | 免费好用的在线工具在线节拍器 – 应用商店 | 免费好用的在线工具IP归属地查询 – 应用商店 | 免费好用的在线工具CSS网格布局生成器 – 应用商店 | 免费好用的在线工具邮箱验证工具 – 应用商店 | 免费好用的在线工具书法练习字帖 – 应用商店 | 免费好用的在线工具金融计算器套件 – 应用商店 | 免费好用的在线工具中国亲戚关系计算器 – 应用商店 | 免费好用的在线工具Protocol Buffer 工具箱 – 应用商店 | 免费好用的在线工具IP归属地查询 – 应用商店 | 免费好用的在线工具图片无损放大 – 应用商店 | 免费好用的在线工具文本比较工具 – 应用商店 | 免费好用的在线工具IP批量查询工具 – 应用商店 | 免费好用的在线工具域名查询工具 – 应用商店 | 免费好用的在线工具DNS工具箱 – 应用商店 | 免费好用的在线工具网站图标生成器 – 应用商店 | 免费好用的在线工具XML Sitemap