简单实现Vue的双向绑定原理

最新推荐文章于 2024-08-22 15:37:44 发布

Feng、锋

最新推荐文章于 2024-08-22 15:37:44 发布

阅读量122

点赞数

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

本文链接：https://blog.csdn.net/weixin_45936275/article/details/108614923

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

需要用到 Object.defineProperty

<body>
    手写一个简单双向绑定<br />
    <input type="text" id="model" /><br />
    <div id="modelText"></div>
  </body>
  <script>
    var user = {}
    var defaultName = '你好，Vue'
    var model = document.querySelector('#model')
    var modelText = document.querySelector('#modelText')
    model.value = defaultName
    modelText.textContent = defaultName
    

    //定义属性 监控改变
    Object.defineProperty(user, 'name', {
      get() {
        return defaultName
      },
      set(newValue) {
        defaultName = newValue
        model.value = newValue
        modelText.textContent = newValue
      }
    })

    model.addEventListener(
      'keyup',
      () => { user.name = model.value },
      false
    )
  </script>