当前位置：首页 > VUE

vue实现双向绑定代码

2026-01-23 15:02:29VUE

Vue 双向绑定实现代码

Vue 的双向绑定主要通过 v-model 指令实现，它结合了 v-bind（属性绑定）和 v-on（事件监听）的功能。以下是几种常见场景的实现代码：

vue实现双向绑定代码

基础输入框绑定

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

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

复选框绑定

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

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

单选按钮绑定

<template>
  <div>
    <input type="radio" v-model="picked" value="选项A">
    <label>选项A</label>
    <input type="radio" v-model="picked" value="选项B">
    <label>选项B</label>
    <p>选择的是：{{ picked }}</p>
  </div>
</template>

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

下拉选择框绑定

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
    <p>选择的是：{{ selected }}</p>
  </div>
</template>

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

自定义组件实现双向绑定

对于自定义组件，需要显式定义 model 选项并触发 input 事件：

vue实现双向绑定代码

<template>
  <div>
    <custom-input v-model="customValue"></custom-input>
    <p>组件值：{{ customValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customValue: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      model: {
        prop: 'value',
        event: 'input'
      },
      template: `
        <input 
          :value="value"
          @input="$emit('input', $event.target.value)">
      `
    }
  }
}
</script>

修饰符使用

Vue 为 v-model 提供了多个修饰符：

.lazy：将输入事件改为 change 事件触发
.number：自动将输入转为数字类型
.trim：自动去除首尾空格

<input v-model.lazy="msg">  <!-- 在change时更新 -->
<input v-model.number="age" type="number">  <!-- 自动转数字 -->
<input v-model.trim="text">  <!-- 自动去除空格 -->