Object.defineProperty实现简单的双向绑定

最新推荐文章于 2022-03-07 19:59:43 发布

荷兰豆叶子上的水熊

最新推荐文章于 2022-03-07 19:59:43 发布

阅读量225

点赞数

分类专栏： MVVM vue 文章标签： vue MVVM

本文链接：https://blog.csdn.net/u010200033/article/details/80158411

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

MVVM

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box{
                width: 200px;background-color: skyblue;
            }
            img{
                display: block;
            }
        </style>
    </head>
    <body>
       <input type="text" id="btn"  />
       <p></p>

       <script type="text/javascript">
            let obj ={};
            let temp = {};
            document.getElementById('btn').onkeyup = function(){
                obj.name = document.getElementById('btn').value;
            }
            Object.defineProperty(obj,'name',{
                get(){
                    return 1
                },
                set(val){
                    temp['name'] = val;
                    document.querySelector('p').innerHTML = temp['name'];
                }
            })
            
       </script>
       
    </body>
</html>

改变input框内容即可重新渲染