表单输入绑定详解:Vue 中的 v-model 实践指南

在 Vue 中,处理用户输入的表单时,v-model 是一个非常核心且强大的指令,它能实现数据的双向绑定,让我们从繁琐的事件监听和数据同步中解放出来。本文将带你全面了解 v-model 的用法、适用的表单类型、绑定值的变化,以及使用修饰符的技巧。


1. v-model 是什么?

通常我们在绑定一个 输入框时,需要手动设置 :value 和监听 @input 来同步数据:

js 复制代码
<input :value="text" @input="event => text = event.target.value">

这既繁琐又容易出错。使用 v-model,我们可以简化为:

js 复制代码
<input v-model="text">

v-model 本质上是语法糖,它会自动帮我们做以下两件事:

  • 绑定表单元素的值(例如 value 或 checked)
  • 监听合适的事件(如 input 或 change)

2. 基本用法

2.1 文本输入框

js 复制代码
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

这会实现用户输入和 message 变量的同步更新。

注意: 对于中文、日文等使用 IME 的语言,v-model 会在输入确认后才更新数据;如果希望在输入拼写阶段就更新,请使用 @input 监听器代替。

2.2 多行文本(textarea)

js 复制代码
<textarea v-model="message" placeholder="请输入多行内容"></textarea>
<p>Multiline message:</p>
<p style="white-space: pre-line;">{{ message }}</p>

在 中不能使用插值表达式(如 {{ text }}),只能使用 v-model。

2.3 复选框

单个复选框(布尔值)

js 复制代码
<input type="checkbox" v-model="checked">
<label>是否选中:{{ checked }}</label>

多个复选框绑定数组

js 复制代码
<input type="checkbox" value="Jack" v-model="checkedNames"> Jack
<input type="checkbox" value="John" v-model="checkedNames"> John
<input type="checkbox" value="Mike" v-model="checkedNames"> Mike

<p>选中项:{{ checkedNames }}</p>

checkedNames 将是包含所有选中项的数组。

2.4 单选按钮

js 复制代码
<input type="radio" value="One" v-model="picked"> One
<input type="radio" value="Two" v-model="picked"> Two
<p>选中:{{ picked }}</p>

当用户选择其中一个选项时,picked 会被设为对应的 value。

2.5 下拉选择器(select)

单选

js 复制代码
<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
</select>
<p>当前选择:{{ selected }}</p>

多选

js 复制代码
<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<p>当前多选值:{{ selected }}</p>

动态渲染选项

js 复制代码
<select v-model="selected">
  <option v-for="opt in options" :value="opt.value">{{ opt.text }}</option>
</select>

const selected = ref('A')
const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

3. 值绑定(非字符串)

有时候,我们希望绑定的数据不是字符串,而是布尔、对象等。

3.1 true-value / false-value(仅复选框)

js 复制代码
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

此时 toggle 的值会是 'yes' 或 'no'。你也可以使用 v-bind 动态绑定:

js 复制代码
<input type="checkbox" v-model="toggle" :true-value="trueVal" :false-value="falseVal">

3.2 对象绑定

js 复制代码
<select v-model="selected">
  <option :value="{ id: 1, name: 'Vue' }">Vue</option>
</select>

绑定的值将是一个对象而非字符串。


4. 修饰符使用技巧

.lazy

默认是监听 input 事件,添加 .lazy 后将变成监听 change:

js 复制代码
<input v-model.lazy="msg">

.number

将输入值自动转换为数字:

js 复制代码
<input v-model.number="age">

适合处理数值型输入,尤其在 时会自动启用。

.trim

自动去除用户输入两端的空格:

js 复制代码
<input v-model.trim="name">

5. v-model 与组件

当我们自定义组件时,也可以使用 v-model 让组件支持双向绑定。Vue 会自动将 v-model 绑定为 modelValue prop 和 update:modelValue 事件。

举个例子:

js 复制代码
<MyInput v-model="inputVal" />

组件内部接收 modelValue 作为输入,并在变化时通过 emit('update:modelValue', newValue) 通知外部更新。


总结:v-model 的优势

相比传统 DOM 操作方式,Vue 的 v-model 提供了:

  • 更少的模板代码和更清晰的语义;

  • 更可靠的数据同步机制;

  • 支持对象、布尔值等非字符串类型绑定;

  • 修饰符提供了更灵活的控制;

  • 在自定义组件中依然适用,提升组件的复用性。

掌握好 v-model,你将能更高效地开发各种复杂交互

相关推荐
燕山石头6 分钟前
解决 IntelliJ IDEA Build时 Lombok 不生效问题
java·前端·intellij-idea
chancygcx_12 分钟前
前端核心技术Node.js(二)——path模块、HTTP与模块化
前端·http·node.js
YGY_Webgis糕手之路13 分钟前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·gis·cesium
丘色果24 分钟前
NPM打包时,报reason: getaddrinfo ENOTFOUND registry.nlark.com
前端·npm·node.js
姜太小白31 分钟前
【前端】CSS Flexbox布局示例介绍
前端·css
我命由我123451 小时前
Spring Boot 项目问题:Web server failed to start. Port 5566 was already in use.
java·前端·jvm·spring boot·后端·spring·java-ee
南囝coding1 小时前
最近Vibe Coding的经验总结
前端·后端·程序员
前端小咸鱼一条1 小时前
React组件化的封装
前端·javascript·react.js
随便起的名字也被占用2 小时前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet
南方kenny2 小时前
TypeScript + React:让前端开发更可靠的黄金组合
前端·react.js·typescript