应用defineProperty简单实现vue的双向数据绑定

双向数据绑定简易版本如何应用defineProperty的getter setter 方法

有这样HTML片段

<input type="text" id="demo">
<p id="display"></p>
var obj = {};
            var bind = [];
            Object.defineProperty(obj, 's', {
                set:function(val){
                    bind['s'] = val;
                },
                get:function(){
                    return bind['s'];
                }
            });

            var demo = $('#demo');
            var display = $('#display');
            demo.keyup(function(event) {
                /* Act on the event */
                obj['s'] = demo.val();
                display.html(bind['s']);
            });

对对象obj['s'] = demo.val();   触发defineProperty的set方法  对bind['s'] 赋值为demo的值。

 

posted on 2017-08-02 15:16  小武爷  阅读(292)  评论(0编辑  收藏  举报