利用defineProperty实现数据的双向绑定

来源：互联网发布：ubuntu samba权限设置编辑：程序博客网时间：2024/05/01 04:26

vue.js如何实现数据的双向绑定呢？
与angular不同。
vue利用的是es5的defineproperty特性。

1.一个小例子

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><input type="text" id="demo"><p id="display"></p><script>    var obj={};    var bind=[];    //触发obj对象set和get方法的时候，趁机来输出或修改bind数组的内容    Object.defineProperty(obj,'s',{        set:function(val){            bind['s']=val;        },        get:function(){            return bind['s'];        }    })    var demo=document.querySelector('#demo');    var display=document.querySelector('#display');    //#demo的value值与bind['s']绑定，#display的innerHTML也与bind['s']绑定。    demo.onkeyup=function(){        obj['s']=demo.value;//触发了obj的set方法，等于#demo的value值赋值给bind['s']。        display.innerHTML=bind['s'];    }</script></body></html>

实现效果：

这里写图片描述

2.兼容性

貌似es5的语法在IE9以下的浏览器不能兼容。所以vue只能兼容ie9以上的浏览器了。

可以使用es5的兼容库：es5-shim。

0 0