<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id="uName"></span>
<script>
var obj = {
pwd: "1234"
};
//主要使用到了get和set方法，最为关键
Object.defineProperty(obj, "userName", {
get: function() {
console.log(‘get init‘);
},
set: function(val) {
console.log("set init");
document.getElementById("uName").innerText = val;
document.getElementById("userName").value = val;
}
});
document.getElementById("userName").addEventListener("keyup", function(event) {
obj.userName = event.target.value;
})
</script>
</body>
</html>
运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，也就是vue的双向数据绑定的核心点。
原文地址：https://www.cnblogs.com/tg666/p/12496915.html
时间： 2024-10-09 19:17:19