简单的原生js实现双向绑定!


一直以来都没时间看双向绑定是什么原理,今天特意写一下原生js实现双向绑定:附上代码如下

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双向绑定</title> </head> <style> </style> <body> <input type="text" model="inputvalue1"> <input type="text" model="inputvalue2"> <input type="text" model="inputvalue3"> <div id="text"></div> </body> <script> // const input = document.querySelector('input[model]') const ngmodel = { inputvalue1: "初始1", inputvalue2: "初始2", inputvalue3: "初始3" }; // 初始化赋值 const inputs = document.querySelectorAll('input[model]'); for (let i = 0; i < inputs.length; i++) { inputs[i].value = ngmodel[inputs[i].getAttribute('model')] inputs[i].addEventListener('keyup', change) }; document.getElementById('text').innerHTML = "我是初始值"; // input操作赋值 function change(e) { const attr = e.target.getAttribute('model'); ngmodel[attr] = e.target.value document.getElementById('text').innerHTML = ngmodel[attr]; } </script> </html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM