v-model原理分析

一、v-model实际上做了两件事情：

• 1、绑定数据     <input type="text" :value="val">
• 2、监听input的输入事件<input type="text" :value="val" @input="val= $event.target.value">

<template>
  <div>
    <div>这里是input输入框输入时响应的文本={{ val }}</div>
    <input
      type="text"
      placeholder="请输入"
      :value="val"
      @input="emitInput"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      val : "",
    };
  },
  methods: {
    emitInput($event) {
      this.val = $event.target.value;
    },
  },
};
</script>