Vue3的v-model如何实现表单双向绑定？

kknone
67 阅读3分钟

一、为什么需要表单输入绑定？

你有没有过这样的经历？做登录页时，想让用户输入的用户名实时显示在页面上；或者做设置页时，修改开关按钮的状态要同步到后台数据。这时候，如果手动监听每个输入框的事件、手动更新数据，代码会变得非常繁琐——比如：

<input type="text" id="username" oninput="updateUsername(event)">

function updateUsername(e) {
  this.username = e.target.value;
}

不仅要写一堆事件监听，还要处理不同表单元素的差异（比如复选框的checked属性、下拉框的selected属性）。而Vue3的表单输入绑定就是为了解决这个问题——它帮你把“输入→数据→视图”的同步逻辑封装成了一个简单的指令：v-model。

二、双向绑定：Vue3的“数据-视图”同步魔法

在讲v-model之前，我们得先搞懂双向绑定的核心逻辑。简单来说，双向绑定就是：

  • 当用户修改视图（比如输入文字、点击复选框），数据自动更新；
  • 当代码修改数据（比如this.username = 'admin'），视图自动同步。

双向绑定的原理流程图

graph TD
A[用户修改视图 输入/点击] --> B[触发对应事件 input/change]
B --> C[更新数据如username 输入内容]
C --> D[Vue响应式系统检测到数据变化]
D --> E[自动更新视图显示]

举个例子：当你在输入框里敲“hello”，Vue会做这几件事：

  1. 监听输入框的input事件，拿到你输入的“hello”；
  2. 把username数据更新为“hello”；
  3. 响应式系统发现username变了，立刻通知输入框显示“hello”。

三、v-model指令：双向绑定的语法糖

Vue3为双向绑定提供了语法糖——v-model，它把“绑定value+监听事件”的逻辑封装成了一个指令。比如：

<input v-model="username">

等价于：

<input :value="username" @input="username = $event.target.value">

是不是简洁多了？v-model帮你省掉了手动写事件监听的麻烦，而且适用于所有表单元素。

四、v-model在不同表单元素中的应用

v-model不是只能用在文本输入框，它支持所有常见的表单元素，我们逐个看：

1. 文本输入框（input[type="text"]）与多行文本（textarea）

  • 文本输入框：直接绑定字符串类型的响应式数据；
  • 多行文本（textarea）：不能用插值表达式（{{ message }}），必须用v-model。

示例代码：

<script setup>
import { ref } from 'vue'
const username = ref('') // 字符串类型
const intro = ref('')    // 多行文本内容
</script>

<template>
  <div>
    <label>用户名：<input type="text" v-model="username"></label>
    <label>个人简介：<textarea v-model="intro" rows="3"></textarea></label>
  </div>
</template>

2. 复选框（input[type="checkbox"]）

复选框分两种情况：

  • 单个复选框：绑定布尔值（true/false），表示“是否选中”；
  • 多个复选框：绑定数组，数组元素是选中的value值。

示例代码：

<script setup>
import { ref } from 'vue'
const rememberMe = ref(false) // 单个复选框（布尔值）
const hobbies = ref([])       // 多个复选框（数组）
</script>

<template>
  <div>
    <!-- 单个复选框：记住我 -->
    <label><input type="checkbox" v-model="rememberMe"> 记住我</label>
    
    <!-- 多个复选框：爱好 -->
    <label><input type="checkbox" value="reading" v-model="hobbies"> 阅读</label>
    <label><input type="checkbox" value="sports" v-model="hobbies"> 运动</label>
    <label><input type="checkbox" value="coding" v-model="hobbies"> 编程</label>
  </div>
</template>

3. 单选按钮（input[type="radio"]）

单选按钮绑定字符串，值为选中的value属性。

示例代码：

<script setup>
import { ref } from 'vue'
const gender = ref('male') // 默认选中“男”
</script>

<template>
  <div>
    <label><input type="radio" value="male" v-model="gender"> 男</label>
    <label><input type="radio" value="female" v-model="gender"> 女</label>
  </div>
</template>

4. 下拉框（select）

下拉框的v-model绑定选中的value值，option的value属性对应选项值。

示例代码：

<script setup>
import { ref } from 'vue'
const city = ref('beijing') // 默认选中“北京”
</script>

<template>
  <div>
    <label>城市：
      <select v-model="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
      </select>
    </label>
  </div>
</template>

五、数据响应式：双向绑定的底层支撑

你可能会问：“为什么数据变了，视图会自动更新？”这要归功于Vue3的响应式系统。

往期文章归档
免费好用的热门在线工具

Vue3用ref或reactive创建响应式数据，当数据变化时，Vue会自动追踪依赖（比如模板中用到username的地方），并更新对应的视图。而v-model正是利用了这个系统，让数据和视图双向同步。

比如用ref创建username：

const username = ref('')

ref会把username包装成一个响应式对象，当你修改username.value（或通过v-model修改），Vue会立刻知道，并更新视图。

六、实际案例：打造一个注册表单

让我们把前面的知识点整合起来，做一个注册表单，包含用户名、密码、记住我、性别、爱好、城市，提交时打印表单数据。

完整代码（带样式）

<script setup>
import { ref } from 'vue'

// 用ref创建表单对象，包含所有字段
const form = ref({
  username: '',
  password: '',
  rememberMe: false,
  gender: 'male',
  hobbies: [],
  city: 'beijing'
})

// 提交处理函数：阻止默认刷新，打印表单数据
const handleSubmit = (e) => {
  e.preventDefault()
  console.log('表单数据：', form.value)
  // 这里可以加发送请求到后台的逻辑，比如axios.post('/api/register', form.value)
}
</script>

<template>
  <div class="register-form">
    <h2>用户注册</h2>
    <form @submit.prevent="handleSubmit">
      <!-- 用户名 -->
      <div class="form-group">
        <label for="username">用户名：</label>
        <input 
          type="text" 
          id="username" 
          v-model="form.username" 
          placeholder="请输入用户名"
          required
        >
      </div>
      
      <!-- 密码 -->
      <div class="form-group">
        <label for="password">密码：</label>
        <input 
          type="password" 
          id="password" 
          v-model="form.password" 
          placeholder="请输入密码"
          required
        >
      </div>
      
      <!-- 记住我 -->
      <div class="form-group">
        <label><input type="checkbox" v-model="form.rememberMe"> 记住登录状态</label>
      </div>
      
      <!-- 性别 -->
      <div class="form-group">
        <label>性别：</label>
        <input type="radio" value="male" v-model="form.gender"> 男
        <input type="radio" value="female" v-model="form.gender"> 女
      </div>
      
      <!-- 爱好 -->
      <div class="form-group">
        <label>爱好：</label>
        <input type="checkbox" value="reading" v-model="form.hobbies"> 阅读
        <input type="checkbox" value="sports" v-model="form.hobbies"> 运动
        <input type="checkbox" value="coding" v-model="form.hobbies"> 编程
      </div>
      
      <!-- 城市 -->
      <div class="form-group">
        <label for="city">城市：</label>
        <select id="city" v-model="form.city">
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
          <option value="shenzhen">深圳</option>
        </select>
      </div>
      
      <!-- 提交按钮 -->
      <button type="submit" class="submit-btn">注册</button>
    </form>
  </div>
</template>

<style scoped>
.register-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input, select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.submit-btn:hover {
  background-color: #3aa776;
}
</style>

代码说明

  1. 表单数据管理：用ref创建form对象，把所有表单字段放在一起，方便管理；
  2. 提交处理：用@submit.prevent阻止表单默认的刷新行为，打印表单数据；
  3. 响应式同步：每个字段用v-model绑定到form对象的属性，输入时自动同步。

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

来做两个小练习，检验一下学习成果～

1. 问题：v-model的语法糖本质是什么？请写出等价的原生绑定代码。

答案解析：
v-model是value属性绑定 + input事件监听的语法糖。比如<input v-model="message">等价于：

<input :value="message" @input="message = $event.target.value">
  • :value="message"：把数据绑定到输入框的value属性；
  • @input：监听输入事件，把输入内容更新到message。

2. 问题：多个复选框如何用v-model实现多选？请写出示例代码。

答案解析：
多个复选框需要绑定到数组类型的响应式数据。每个复选框的value对应数组中的元素，选中时加入数组，取消时移除。示例：

<script setup>
import { ref } from 'vue'
const hobbies = ref([]) // 数组类型
</script>

<template>
  <label><input type="checkbox" value="reading" v-model="hobbies"> 阅读</label>
  <label><input type="checkbox" value="sports" v-model="hobbies"> 运动</label>
  <label><input type="checkbox" value="coding" v-model="hobbies"> 编程</label>
</template>

比如选中“阅读”和“编程”，hobbies.value会变成['reading', 'coding']。

八、常见报错与解决方案

学习过程中遇到报错别慌，以下是表单绑定常见的3个错误及解决办法：

1. 报错：v-model is not allowed on <input type="file">

  • 原因：文件输入框（type="file"）的value是只读的，无法通过v-model修改。
  • 解决办法：用ref获取DOM元素，监听change事件拿文件： 
    <script setup>
import { ref } from 'vue'
const fileInput = ref(null)
const handleFile = () => {
  const file = fileInput.value.files[0] // 获取选中的文件
  console.log('文件：', file)
}
</script>

<template>
  <input type="file" ref="fileInput" @change="handleFile">
</template>

2. 报错：Property "message" was accessed during render but is not defined

  • 原因：模板里用了message，但没在setup中定义响应式数据。
  • 解决办法：用ref或reactive定义message： 
    import { ref } from 'vue'
const message = ref('') // 必须定义！

3. 报错：v-model requires a valid Vue instance

  • 原因：可能在非Vue组件中用了v-model（比如纯HTML文件没挂载Vue），或组件未正确注册。
  • 解决办法：确保在Vue组件中使用，并正确挂载应用： 
    // main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app') // 挂载到#app元素

参考链接

官网表单处理文档：vuejs.org/guide/essen…

avatar
文章
阅读
粉丝