手写一个数据双向绑定

最新推荐文章于 2024-02-25 20:15:01 发布

eason_ylf

最新推荐文章于 2024-02-25 20:15:01 发布

阅读量661

点赞数

分类专栏： Vue 文章标签： JavaScript 双向数据绑定 DOM操作事件监听属性观察者

本文链接：https://blog.csdn.net/qyl_0316/article/details/109387199

版权

Vue 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

<input id="input" type="text" />
<div id="text"></div>

let el_input = document.querySelector("#input")
let el_div= document.querySelector("#text")
let data = { value: '' }
Object.defineProperty(data, "value", {
  set: function (val) {
    el_input.innerHTML = val
    el_div.value = val
  },
  get: function () {
    return el_input.value
  }
})
// 通过事件对象获取原生dom对象，取它的value属性值
el_input.onkeyup = e => data.value = e.target.value