简单实现v-model

114 阅读1分钟

v-model,主要作用实现了在html标签中与data数据双向绑定,为用户提供了简便快捷的双向绑定使用方式

<body>
  <div style="border: 1px solid gray;width: 100px;height: 30px;"></div>
  <input type="text" value="">
</body>
<script>
  let div = document.querySelector("div")
  let ipt = document.querySelector("input")
  let data = { val: '' }
  ipt.oninput = function (val) {
    data.val = ipt.value
  }
  Object.defineProperty(data, "val", {
    get() {
      return ipt.value
    },
    set(value) {
     div.innerHTML = ipt.value;
      ipt.value = value
    }
  })
</script>