双向数据绑定的原理demo-原创手记-慕课网

首页课程实战体系课手记专栏慕课教程

双向数据绑定的原理demo

AllySu 2018-09-23 23:02:34 浏览 2207

AllySu

关注TA

手记 40

粉丝 870

获赞 3669

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> Object.defineProperty</title>
</head>
<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
    <script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function() {
            return obj
        },
        set: function(newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function(e) {
        obj.txt = e.target.value
    })
    </script>
</body>
</html>