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

时间：2021-05-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。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持!

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章