雙向繫結原理
阿新 • • 發佈:2018-10-31
雙向繫結原理
<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);
}
});