<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#myInput {
width: 400px;
height: 50px;
font-size: 40px;
color: red;
}
#contain {
margin-top: 20px;
width: 400px;
height: 200px;
border: 1px solid salmon;
}
</style>
</head>
<body>
<input id="myInput" type="text" />
<div id="contain"></div>
<script>
let text;
window.data = {};
const oIn = document.getElementById("myInput");
const oDiv = document.getElementById("contain");
oIn.addEventListener("input", function (e) {
text = e.target.value;
// console.log(text);
window.data.value = text;
});
Object.defineProperty(window.data, "value", {
get() {
return "";
},
set(v) {
oDiv.innerHTML = v;
},
});
</script>
</body>
</html>
### vue3 proxy 双向绑定
<body>
<h2 id="app"></h2>
<input id="input" type="text" />
<script>
let app = document.getElementById('app')
let input = document.getElementById('input')
let obj = { // 源数据
text: 'hello world'
}
let proxy = new Proxy(obj, {
set: (target, prop, value) => { // input事件触发进行劫持，触发update方法
target[prop] = value
update(value)
}
})
const update = (value) => { // update方法用于同步dom更新
app.innerHTML = value
input.value = value
}
input.addEventListener('input', (e) => { // 监听input数据变化，并修改proxy的值
proxy.text = e.target.value
})
proxy.text = obj.text // 初始化源数据
</script>
</body>
vue双向绑定源码
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Vue双向数据绑定的原理：可以将对象的属性绑定到UI，具体的说，我们有一个对象，该对象有一个name属性，当我们给...
- 有了前面的基础，v-model其实很容易实现。 实现思路：1、解析element的属性节点（v-model="na...
- 数据的双向绑定（数据观测） 上一章我们在学习initState的时候发现初始化的时候，initProps和init...
- 今天工作时候遇到了checkbox的v-model双向绑定问题 话不多说, 直接上代码！ <template>
