js实现vue双向绑定
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>objectDefineProperty 模拟vue 数据双向绑定</title>
</head>
<body>
<input type="text" id="userName"/>
<br/>
<span id="uName"></span>
<script>
var obj ={}
Object.defineProperty(obj,"name",{
set:function (val) {
console.log("set")
document.getElementById("uName").innerText = val
document.getElementById("userName").value = val
},
get:function () {
console.log("get")
}
})
document.getElementById("userName").addEventListener("keyup",function () {
obj.name = event.target.value;
})
</script>
</body>
</html>