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

Vue.js 双向绑定实现方法

Vue.js 的双向绑定主要通过 v-model 指令实现，它结合了数据绑定和事件监听，适用于表单元素。以下是具体实现方式：

基础用法

在模板中使用 v-model 绑定数据，数据变化会自动同步到视图，反之亦然：

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

组件中实现

在自定义组件中实现双向绑定需要显式定义 model 选项和触发事件：

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

使用方式与原生元素一致：

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

修饰符

v-model 支持修饰符来调整行为：

• .lazy：将 input 事件改为 change 事件（失焦后更新）
• .number：自动将输入转为数值类型
• .trim：自动去除首尾空格

示例：

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

多选框绑定

对于多选框，v-model 会绑定到数组：

<input type="checkbox" v-model="checkedNames" value="Jack">
<input type="checkbox" v-model="checkedNames" value="John">

单选按钮绑定

单选按钮绑定到单个值：

<input type="radio" v-model="picked" value="One">

下拉选择框

select 元素绑定到当前选中项：

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
</select>

原理说明

Vue 的双向绑定本质是语法糖，它相当于：

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

在组件中需要手动处理 value prop 和 input 事件来实现相同效果。