当前位置：首页 > VUE

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

2026-01-06 23:44:51VUE

Vue.js 双向绑定的实现方法

Vue.js 的核心特性之一是数据双向绑定，主要通过 v-model 指令实现。以下是具体实现方式：

基础用法

在表单元素上使用 v-model 指令，将表单输入与 Vue 实例的数据属性绑定：

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

对应的 Vue 实例：

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

修饰符应用

Vue 提供修饰符扩展 v-model 的功能：

.lazy：将输入事件改为 change 事件触发
```
<input v-model.lazy="msg">
```
.number：自动将输入转为数字类型
```
<input v-model.number="age" type="number">
```
.trim：自动过滤首尾空白字符
```
<input v-model.trim="text">
```

组件中的双向绑定

在自定义组件中实现双向绑定需要显式定义：

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

使用时保持与原生元素相同：

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

原理说明

Vue 的双向绑定实质是语法糖，包含两个操作：

将数据绑定到元素的 value 属性
监听输入事件更新数据

等价于以下代码：

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

多选框绑定

处理多选框时需要绑定数组：

<input type="checkbox" v-model="checkedNames" value="Jack">
<input type="checkbox" v-model="checkedNames" value="John">
<span>选中的名字: {{ checkedNames }}</span>

数据定义：

data: {
  checkedNames: []
}

单选按钮绑定

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

<input type="radio" v-model="picked" value="one">
<input type="radio" v-model="picked" value="two">
<span>选择的值: {{ picked }}</span>

下拉选择框绑定

select 元素绑定方式：

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

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