1. 程式人生 > >雙向繫結原理

雙向繫結原理

雙向繫結原理

<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); } });