一直以來都沒時間看雙向綁定是什么原理，今天特意寫一下原生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>
