vue2- Object.defineProperty 版本
const data = {
text: "default"
};
const input = document.getElementById("input");
const span = document.getElementById("span");
Object.defineProperty(data, "text", {
set(newVal) {
input.value = newVal;
span.innerHTML = newVal;
}
});
input.addEventListener("keyup", function(e) {
data.text = e.target.value;
});
vue3- proxy 版本
const data = {
text: "default"
};
const input = document.getElementById("input");
const span = document.getElementById("span");
const handler = {
set(target, key, value) {
target[key] = value;
input.value = value;
span.innerHTML = value;
}
};
const proxy = new Proxy(data, handler);
input.addEventListener("keyup", function(e) {
proxy.text = e.target.value;
});