js如何实现双向绑定_js 动态添加input 双向绑定-CSDN博客

本文链接：https://blog.csdn.net/qq_39562867/article/details/88907522

   一直以来都没时间看双向绑定是什么原理，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>