双向绑定原理

Posted on Edited on In

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <input type="text" id="a">
        <span id="b"></span>
    </div>
    <script type="text/javascript">
        var  obj = {}
        Object.defineProperty(obj,"hello",{
            get:function(){
                console.log("get方法触发了")
            },
            set:function(val){
                document.getElementById("a").value = val;
                document.getElementById("b").innerHTML = val
            }
        })

        document.getElementById("a").addEventListener('keyup',function(e){
            obj.hello = e.target.value
        });
    </script>
</body>
</html>