js实现一个双向数据绑定

最新推荐文章于 2023-06-09 11:42:46 发布

前端技术负责人

最新推荐文章于 2023-06-09 11:42:46 发布

阅读量97

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43837268/article/details/99687234

版权

js 专栏收录该内容

101 篇文章 2 订阅

订阅专栏

let obj = {}
let input = document.getElementById('input')
let span = document.getElementById('span')
// 数据劫持
Object.defineProperty(obj, 'text', {
  configurable: true,
  enumerable: true,
  get() {
    console.log('获取数据了')
  },
  set(newVal) {
    console.log('数据更新了')
    input.value = newVal
    span.innerHTML = newVal
  }
})
// 输入监听
input.addEventListener('keyup', function(e) {
  obj.text = e.target.value
})