js实现vue双向数据绑定利用访问器属性

最新推荐文章于 2024-04-22 09:07:57 发布

徐行莫停

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量369

点赞数

分类专栏：面试题各种小知识点整理文章标签： js实现vue双向数据绑定利用访问器属性

本文链接：https://blog.csdn.net/qq_35765126/article/details/79352425

版权

面试题同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

各种小知识点整理

8 篇文章 0 订阅

订阅专栏

双向数据绑定面试一般都会问到，恶补一下，
首先要了解访问器属性用法，时间关系，先贴代码，有时间了分析一下
详解CDN上有

Object.defineProperty(obj,propertyName,{
                get:function(){
                    //读取obj对象的propertyName属性时执行
                },
                set:function(currvalue){
                    //修改obj对象的propertyName属性时执行
                },
            });

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现vue双向数据绑定 利用访问器属性</title>
</head>
<body>
    <input bind-value="value" type="text" placeholder="请输入..."  id="user-input">
    <p bind-text="value" id="show-input"></p>
    <script>
    var elems=[document.getElementById('user-input'),document.getElementById('show-input')];
        var data={
            initValue:'',
        };
        function define(obj,propertyName) {
            Object.defineProperty(obj,propertyName,{
                get:function(){
                    return this.initValue;
                },
                set:function(currvalue){
                    this.initValue=currvalue;
                    //同步p
                    scan();
                },
            });
        }

        define(data,'value');
        data.value='';
        scan();
        //监听事件
        elems[0].addEventListener('keyup',function(e){
            var e=e||window.event;
            data.value=e.target.value;
        });
        function scan(){
            for(var i=0;i<elems.length;i++){
                var ele=elems[i];
                for(var j=0;j<ele.attributes.length;j++){
                    var attr=ele.attributes[j];
                    if(attr.nodeName.indexOf('bind')>=0){
                        elems[1].innerHTML=data.value;
                        elems[0].setAttribute('current-values',data.value);
                    }
                }
            }
        }
    </script>
</body>
</html>

徐行莫停

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现vue双向数据绑定利用访问器属性

双向数据绑定面试一般都会问到，恶补一下，首先要了解访问器属性用法，时间关系，先贴代码，有时间了分析一下详解CDN上有Object.defineProperty(obj,propertyName,{ get:function(){ //读取obj对象的propertyName属性时执行 ...
复制链接

扫一扫