JavaScript练习 – 数据监听和双向绑定

时间:2021-6-12 作者:qvyue

在使用vue时,我们在最初对数据响应式就会遇到一个概念,叫数据绑定。至于vue中怎么写的并不是很清楚,只是知道vue2里面利用object.defineProperty方式对get/set进行拦截。知道这个概念基本大概知道怎么去实现了。示例如下:

JavaScript练习 - 数据监听和双向绑定

代码如下:





    


Document




window.viewModel = {}; let input = document.querySelector('.input'); let outputs = document.querySelectorAll('.output'); Object.defineProperty(viewModel, 'inputValue', { enumerable: true, configurable: true, get: function () { return input.value; }, set: function (value) { input.value = value; inputListener(value); } }); const eventNames = ['input', 'change']; eventNames.forEach(eventName => { input.addEventListener(eventName, function (e) { window.viewModel.inputValue = e.target.value; }); }); inputListener = function (value) { outputs.forEach(output => { output.innerHTML = value; }); }
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。