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

使用 Vue.js 实现双向绑定

Vue.js 通过 v-model 指令实现双向绑定，主要用于表单元素与数据的同步更新。以下是具体实现方法：

基本语法

在模板中使用 v-model 绑定数据属性：

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

在 Vue 实例中定义数据：

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

表单元素支持

1. 文本输入框

   <input type="text" v-model="textValue">

2. 多行文本

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

3. 复选框
   单个复选框绑定布尔值：

   <input type="checkbox" v-model="isChecked">

   多个复选框绑定数组：

   

   <input type="checkbox" value="A" v-model="checkedItems">
   <input type="checkbox" value="B" v-model="checkedItems">

4. 单选按钮

   <input type="radio" value="Option1" v-model="selectedOption">
   <input type="radio" value="Option2" v-model="selectedOption">

5. 下拉选择框

   <select v-model="selectedOption">
     <option value="A">选项A</option>
     <option value="B">选项B</option>
   </select>

修饰符

1. .lazy
   将输入事件改为 change 事件触发同步：

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

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

   

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

3. .trim
   自动去除首尾空格：

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

自定义组件双向绑定

在自定义组件中实现 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="message"></custom-input>

原理说明

Vue.js 的双向绑定本质是语法糖，等价于：

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