js代码实现vue双向数据绑定实例

js代码实现vue双向数据绑定实例,第1张

双向数据绑定面试一般都会问到,首先要了解访问器属性用法,时间关系,先贴代码,有时间了分析一下 ,希望本文能帮助到大家。

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>

相关推荐:

Vue双向数据绑定源码分析

js实现双向数据绑定的方法

前端之js双向数据绑定

以上就是js代码实现vue双向数据绑定实例的详细内容,更多请关注php中文网其它相关文章!

文章来源:https://www.php.cn/faq/386999.html

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复