<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双向数据绑定的详细内容,更多请关注php中文网其它相关文章!