当前位置：首页 > VUE

vue表单实现双向绑定

2026-02-22 09:35:46VUE

Vue 表单实现双向绑定

Vue 提供了 v-model 指令来实现表单元素的双向数据绑定。以下是常见表单元素的双向绑定实现方法：

文本输入框

<input type="text" v-model="message">
<p>{{ message }}</p>

data() {
  return {
    message: ''
  }
}

多行文本

<textarea v-model="message"></textarea>
<p>{{ message }}</p>

复选框

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

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

多个复选框绑定到数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<p>{{ checkedNames }}</p>

data() {
  return {
    checkedNames: []
  }
}

单选按钮

<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
<p>{{ picked }}</p>

选择框

单选：

vue表单实现双向绑定

<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 - 将 input 事件转为 change 事件：

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

.number - 自动将输入值转为数字：

vue表单实现双向绑定

<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)"
  >
`

对于 Vue 3，可以使用 v-model 的参数：

<custom-input v-model:title="bookTitle"></custom-input>

// 子组件
props: ['title'],
emits: ['update:title']

这些方法覆盖了 Vue 中实现表单双向绑定的主要场景和技巧。

标签: 表单绑定

分享给朋友：

vue数据实现双向绑定

Vue 数据双向绑定的实现原理 Vue 的数据双向绑定主要通过 v-model 指令实现，结合了数据绑定和事件监听。以下是核心实现方式：使用 v-model 指令 v-model 是语法糖，自动…

如何封装表单react

封装 React 表单的方法封装 React 表单可以通过创建可复用的表单组件或自定义 Hook 来实现。以下是几种常见的方法：使用受控组件封装表单通过状态管理表单数据，将表单字段的值与 R…

Vue数据绑定实现

Vue 数据绑定的核心机制 Vue 的数据绑定基于响应式系统，通过 Object.defineProperty 或 Proxy 实现。当数据变化时，视图自动更新。双向绑定的实现方式 v-model…

vue怎么实现绑定

数据绑定基础 Vue 通过 v-bind 指令实现单向数据绑定（数据从模型到视图），语法为 v-bind:属性="数据" 或简写为 :属性="数据"。例如绑定 src 属性： <img :…

vue实现流程表单

Vue 实现流程表单的方法使用动态组件实现步骤切换在 Vue 中可以通过动态组件结合状态管理来实现流程表单的分步操作。定义一个父组件管理当前步骤，子组件处理各步骤的表单逻辑。 <templ…

vue实现层级表单

Vue 实现层级表单的方法递归组件实现嵌套表单使用递归组件可以轻松处理无限层级的表单结构。定义一个组件，该组件能够调用自身来渲染子表单。 <template> <div&…

vue表单实现双向绑定