原生JS实现双向绑定

版权声明:哼!坏人!这是我辛辛苦苦码的! https://blog.csdn.net/DurianPudding/article/details/88199542

现在框架都可以实现双向绑定,vue中实现双向绑定的原理是利用Object.defineProperty

定义访问器属性要使用Object.defineProperty,接收三个参数:属性所在的对象,属性的名字,一个描述符对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" id="txt">
  <p id="show-txt"></p>
</div>
<script>
  var obj = {};

  // obj为content属性所在的对象,content为obj对象的属性
  // get 读取访问器属性返回有效的值;set 传入新值
  Object.defineProperty(obj, 'content', {
    get: function () {
      return obj
    },
    set: function (newValue) {
      document.getElementById('txt').value = newValue
      document.getElementById('show-txt').innerHTML = newValue
    }
  });

  // keyup 键被松开
  document.addEventListener('keyup', function (e) {
    // 通过监听keyup事件,用目标值为obj.content赋值
    obj.content = e.target.value
  });

</script>
</body>

</html>

addEventListener

猜你喜欢

转载自blog.csdn.net/DurianPudding/article/details/88199542