vue简单实现双向绑定

双向绑定的基本实现

Vue 的双向绑定核心是通过 v-model 指令实现的，它结合了 v-bind（属性绑定）和 v-on（事件监听）。以下是一个简单的示例：

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

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

手动实现双向绑定

如果不使用 v-model，可以通过 v-bind 和 v-on 手动实现双向绑定：

<template>
  <div>
    <input 
      :value="message" 
      @input="message = $event.target.value" 
      placeholder="输入内容"
    >
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

自定义组件中的双向绑定

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

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

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

使用计算属性实现复杂绑定

如果需要处理复杂逻辑，可以使用计算属性实现双向绑定的衍生功能：

<template>
  <div>
    <input v-model="computedMessage" placeholder="输入内容">
    <p>处理后的内容是: {{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawMessage: ''
    }
  },
  computed: {
    computedMessage: {
      get() {
        return this.rawMessage.toUpperCase();
      },
      set(value) {
        this.rawMessage = value.toLowerCase();
      }
    }
  }
}
</script>

修饰符的使用

Vue 的 v-model 提供了一些修饰符，可以简化数据处理：

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

<input v-model.lazy="message">
<input v-model.number="age" type="number">
<input v-model.trim="text">