版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/81462545
双向绑定原理
<input type="text" oninput="evtInput()" id="input"/>
<p id="text"></p>
// 1、定义对象vue,其中有个属性:name
let vue = { name: "123" };
function evtInput() {
// 页面数据发生变化如何通知到JS
vue.name = document.getElementById("input").value;
document.getElementById("text").innerHTML = vue.name;
console.log("页面上的数据发生了变化:", vue.name);
}
// 2. 拦截对象vue的元素name,重新处理get和set方法。
// JS数据变化如何通知到页面
Object.defineProperty(vue, "name", {
// 当获取name元素值时,get方法被执行。
get: function() {
console.log("get方法被执行");
return "456";
},
// 当重新赋值name值时,set方法被执行。
set: function(v) {
document.getElementById("input").value = v;
document.getElementById("text").innerHTML = v;
console.log("set方法被执行,js数据变化通知到页面,新的值为:", v);
}
});