<!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的双向数据绑定的核心点。