vue表单实现双向绑定

Vue 表单双向绑定实现方法

Vue 通过 v-model 指令实现表单元素与数据的双向绑定。以下是常见表单元素的双向绑定示例：

文本输入框

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

多行文本框

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

复选框

单个复选框绑定布尔值：

<input type="checkbox" v-model="checked">
<p>复选框状态：{{ checked }}</p>

多个复选框绑定数组：

<input type="checkbox" value="A" v-model="checkedItems">
<input type="checkbox" value="B" v-model="checkedItems">
<p>选中的项：{{ checkedItems }}</p>

单选按钮

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

下拉选择框

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

修饰符

Vue 为 v-model 提供了一些有用的修饰符：

.lazy - 将 input 事件转为 change 事件后同步数据

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

.number - 自动将输入值转为数值类型

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

.trim - 自动过滤用户输入的首尾空白字符

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

自定义组件双向绑定

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

1. 组件内部使用 model 选项指定 prop 和 event
2. 在组件内部通过 $emit 触发事件

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

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

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

注意事项

• 对于单选按钮、复选框和选择框，v-model 绑定的值通常是静态字符串或布尔值
• 多个复选框可以绑定到同一个数组
• 在组件上使用 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
• Vue 3 中 v-model 的 prop 和事件默认名称有所变化