在实现双向绑定之前,先了解一个函数的作用:
Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
想要对Object.defineProperty()这个函数有更深入的了解,这篇博客里有更详细的解释。
以下是用原生JS实现数据双向绑定的代码:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--新建div及input和h1用来显示存放和输入数据-->
<div id="app">
<input id="myTnput" type="text">
<h1 id="myH"></h1>
</div>
<script>
let obj = {};
Object.defineProperty(obj,"theName",{
get() {
//下面set定义了theName = v
return theName;
},
set(v) {
//修改innerHTML
document.getElementById("myH").innerHTML = v;
theName = v;
}
})
var theInput = document.getElementById("myInput");
//oninput函数 在输入时响应
theInput.oninput = function (e) {
obj.theName = e.target.value;
}
</script>
</body>
</html>