Vue 双向绑定原理
2021-10-14 本文已影响0人
洪锦一
使用 defineProperty
<body>
<input type="text" id="inputId">
<p id="pId"></p>
<script>
/*
defineProperty 定义属性
第一个参数：要定义的对象
第二个参数：要定义或修改的属性名称（任意名称）
第三个参数：将被定义或修改的属性描述
*/
var obj = {};
Object.defineProperty(obj, 'name', {
get() {
// console.log("get");
return obj;
},
set(newVal) {
// console.log("set",newVal);
document.getElementById("inputId").value = newVal;
document.getElementById("pId").innerHTML = newVal;
}
});
document.getElementById('inputId').addEventListener('keyup', function (e) {
obj.name = e.target.value;
})
//2s后修改数据
setTimeout(() => {
obj.name = '8888'
}, 2000)
</script>
</body>
