vue双向绑定实现案例

Vue 双向绑定实现案例

Vue 的双向绑定通过 v-model 指令实现，结合了数据绑定和事件监听。以下是几种常见场景的实现案例：

基础输入框绑定

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

• v-model 绑定 message 数据，输入框内容变化时自动更新数据，页面渲染同步显示。

复选框绑定

<template>
  <input type="checkbox" v-model="isChecked">
  <label>{{ isChecked ? '已选中' : '未选中' }}</label>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

• 适用于布尔值场景，复选框状态与 isChecked 数据双向同步。

单选按钮绑定

<template>
  <input type="radio" v-model="selectedOption" value="A">
  <label>选项A</label>
  <input type="radio" v-model="selectedOption" value="B">
  <label>选项B</label>
  <p>当前选择：{{ selectedOption }}</p>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'A'
    }
  }
}
</script>

• 多个单选按钮绑定同一数据，选中时更新为对应的 value 值。

下拉选择框绑定

<template>
  <select v-model="selectedFruit">
    <option disabled value="">请选择</option>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
  </select>
  <p>选择的水果：{{ selectedFruit }}</p>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: ''
    }
  }
}
</script>

• select 元素的绑定方式与输入框类似，数据同步为选中项的 value。

自定义组件双向绑定

若需在自定义组件中实现 v-model，需定义 model 选项并触发事件：

<!-- 父组件 -->
<template>
  <CustomInput v-model="customValue" />
</template>

<script>
export default {
  data() {
    return {
      customValue: ''
    }
  }
}
</script>

<!-- 子组件 CustomInput.vue -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

• 子组件通过 props 接收 value，并通过 $emit('input') 通知父组件更新数据。

修饰符应用

v-model 支持修饰符，例如 .lazy（转为 change 事件触发）、.number（自动转为数字）：

<input v-model.lazy="lazyMessage">
<input v-model.number="numericValue" type="number">

以上案例覆盖了 Vue 双向绑定的核心用法，可根据实际需求组合或扩展。