当前位置：首页 > VUE

vue双向绑定实现案例

2026-02-23 22:49:41VUE

Vue 双向绑定实现案例

Vue 的双向绑定通过 v-model 指令实现，主要应用于表单元素（如 input、textarea、select）。以下是具体实现案例：

基础输入框绑定

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

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

v-model 绑定 message 数据，输入框的值变化会自动更新 message，反之亦然。

复选框绑定

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

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

复选框绑定布尔值，选中状态与 checked 同步。

下拉选择框绑定

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

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

v-model 绑定 selected，选项变化时自动更新数据。

自定义组件双向绑定

通过 model 选项和 $emit 实现自定义组件的双向绑定：

<!-- 父组件 -->
<template>
  <div>
    <CustomInput v-model="inputValue" />
    <p>父组件接收的值：{{ inputValue }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

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

<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: ['value']
}
</script>

子组件通过 props 接收 value，并通过 $emit 触发 input 事件实现数据同步。

修饰符应用

<template>
  <div>
    <!-- 输入时延迟更新（.lazy） -->
    <input v-model.lazy="lazyMsg">
    <p>延迟更新：{{ lazyMsg }}</p>

    <!-- 自动转为数字（.number） -->
    <input v-model.number="age" type="number">
    <p>年龄类型：{{ typeof age }}</p>

    <!-- 去除首尾空格（.trim） -->
    <input v-model.trim="trimmed">
    <p>去空格后："{{ trimmed }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lazyMsg: '',
      age: 0,
      trimmed: ''
    }
  }
}
</script>