Object.defineProperty

最新推荐文章于 2024-06-07 16:03:08 发布

从小白到能飞起来

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量59

点赞数

本文链接：https://blog.csdn.net/m0_62012366/article/details/124065782

版权

关键词由CSDN通过智能技术生成

最近在复习vue的双向绑定原理

核心就是Object.defineProperty

关于用法，附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="message-input">
        <span id="message-span"></span>
    </div>
</body>
<script>
    // 双向绑定demo
    var obj ={};

    Object.defineProperty(obj,'name',{
        get: function () {
            console.log('get val',val);
            return val;
        },
        set: function (newval) {
            val = newval;
            console.log('set val',val);
            document.getElementById('message-input').value=val;
            document.getElementById('message-span').innerHTML =val;            
        }
    });
    document.addEventListener('keyup',function (e) {
        obj.name = e.target.value;
    });
</script>
</html>

效果如图：