当前位置：首页 > VUE

vue如何实现表单绑定

2026-02-22 16:58:41VUE

表单绑定基础

在Vue中，表单绑定主要通过v-model指令实现，它负责监听用户的输入事件并更新数据。v-model本质上是一个语法糖，结合了v-bind和v-on的功能。

对于文本输入框：

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

对于多行文本：

<textarea v-model="message"></textarea>

复选框绑定

单个复选框绑定到布尔值：

<input type="checkbox" v-model="checked">
<label>{{ checked }}</label>

多个复选框绑定到数组：

<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">
<input type="checkbox" value="Mike" v-model="checkedNames">
<p>选择的名字：{{ checkedNames }}</p>

单选按钮绑定

单选按钮绑定到同一个变量：

vue如何实现表单绑定

<input type="radio" value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked">
<p>选择的值：{{ picked }}</p>

选择框绑定

单选选择框：

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<p>选择的值：{{ selected }}</p>

多选选择框（绑定到数组）：

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<p>选择的值：{{ selected }}</p>

修饰符使用

.lazy修饰符将输入事件改为change事件触发：

vue如何实现表单绑定

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

.number自动将输入转为数字类型：

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

.trim自动去除首尾空格：

<input v-model.trim="msg">

自定义组件表单绑定

在自定义组件中实现v-model：

<custom-input v-model="searchText"></custom-input>

组件内部需要：

props: ['modelValue'],
emits: ['update:modelValue'],
template: `
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
`