<html> <head> <title>textbind</title> </head> <body> <input type="text" name="infoinsert"> <p id="infoshow"></p> <script type="text/javascript"> var obj = { seeyou: 'hello' }; object.defineproperty(obj, 'infobind', { get: function () { return this.seeyou; }, set: function (newvalue) { document.getelementbyid('infoshow').innertext = newvalue; document.getelementsbyname('infoinsert')[0].value = newvalue; } }); document.getelementsbyname('infoinsert')[0].addeventlistener('keyup', function () { obj.infobind = this.value; }); </script> </body> </html>
通过以上代码，不难看出框架中使用的双向数据绑定的底层实现原理是通过es5中的defineproperty属性来实现的。
相关推荐：
js实现双向数据绑定的方法
react.js 父子组件数据绑定实时通讯实例展示
angularjs 双向数据绑定详解简单实例
以上就是前端之js双向数据绑定的详细内容。