簡單的原生js實現雙向綁定！
阿新 • • 發佈：2019-03-29
tor type cti div title span dev tar style
一直以來都沒時間看雙向綁定是什麽原理，今天特意寫一下原生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>
簡單的原生js實現雙向綁定！