如何用原生js写双向数据绑定

双向数据绑定

• 原理:当你改变input里面的value值时,span的value值也会改变,
• 代码如下

  <input type="text" id="input">
   <span id="span"></span>
   <script>
       let obj = {};
       let input = document.getElementById('input')
       let span = document.getElementById('span')
       Object.defineProperty(obj, 'text', {
           get() {
               console.log('数据更新了 get')
           },
           set(newvalue) {
               console.log('数据更新了 set')
               input.value = newvalue
               span.innerHTML = newvalue
           },

       })
       input.addEventListener('keyup', function(e) {
           obj.text = e.target.value
       })
   </script>

• 通过 Object.defineProperty()方法会直接在一个对象定义一个新属性,或者修改一个对象的现有属性,并返回对象.
• 如如所示,代码结果
• objectdefineProperty链接添加链接描述