当前位置：首页 > JavaScript

怎么用vue.js实现双向绑定

2026-04-04 12:42:15JavaScript

使用 Vue.js 实现双向绑定

Vue.js 的双向绑定主要通过 v-model 指令实现，它结合了 v-bind 和 v-on 的功能，能够自动同步表单输入与应用状态。

基础用法

在模板中直接使用 v-model 绑定数据：

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

对应的 JavaScript 部分：

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

表单元素绑定

v-model 适用于不同类型的表单元素：

复选框（单个）：

<input type="checkbox" v-model="checked">
<span>Checked: {{ checked }}</span>

复选框（多个）：

<input type="checkbox" value="A" v-model="checkedItems">
<input type="checkbox" value="B" v-model="checkedItems">
<span>Checked items: {{ checkedItems }}</span>

单选按钮：

怎么用vue.js实现双向绑定

<input type="radio" value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked">
<span>Picked: {{ picked }}</span>

下拉选择框：

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
</select>
<span>Selected: {{ selected }}</span>

修饰符

Vue 提供了 v-model 的修饰符来调整行为：

.lazy：将输入事件改为 change 事件后同步
```
<input v-model.lazy="msg">
```
.number：自动将输入转为数值类型
```
<input v-model.number="age" type="number">
```
.trim：自动去除首尾空白字符
```
<input v-model.trim="msg">
```

自定义组件实现双向绑定

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

组件内部通过 value prop 接收值
在需要时触发 input 事件来更新值

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

使用方式与原生元素相同：

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

高级用法

对于需要更复杂绑定的场景，可以在组件中指定 model 选项：

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    >
  `
})

响应式原理

Vue 的双向绑定基于响应式系统实现：

使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）追踪数据变化
通过发布-订阅模式通知相关依赖进行更新
结合虚拟 DOM 差异算法高效更新视图

注意事项

对于复杂对象，需要确保属性是响应式的
数组变更需要通过 Vue 提供的变异方法（如 push, pop 等）触发更新
在 Vue 3 中，v-model 的默认 prop 从 value 改为 modelValue，事件从 input 改为 update:modelValue