双向数据绑定
顾名思义:页面改变影响数据,数据改变也会影响页面
页面影响数据
首先是html代码结构
<body>
<!-- onInput事件,当内容改变时,马上出发input事件 -->
<!-- 在标签上绑定事件,要传入事件对象 -->
<input type="text" id='myInp' onInput="fn(event)">
</body>
假设存储数据的对象
let data = {
msg: ""
}
页面触发的函数事件
let fn = function (ev) {
// 使用ev.target,拿到触发事件的标签
// console.log(ev.target.value)
data.msg = ev.target.value
}
测试:
这时候其实已经完成了页面输入值,改变了数据
数据影响数据
我们使用Object.defineProperty方法
let _data = {
msg: ""
}
Object.defineProperty(data, 'msg', {
set(value) {
document.getElementById("myInp").innerHTML = value;
document.getElementById('myInp').value = value
_data['msg']=value
},
get() {
return _data['msg']
}
})
为什么要重新定义一个_data呢?
这里的_data和data其实是一个映射关系,因为当你获取data对象里的msg属性值的时候, 触发get方法
如果在get方法里直接提取data.msg的值, 会造成递归调用卡死.
完整代码
<body>
<!-- onInput事件,当内容改变时,马上出发input事件 -->
<!-- 在标签上绑定事件,要传入事件对象 -->
<input type="text" id='myInp' onInput="fn(event)">
</body>
</html>
<script>
// 首先定义一个fn()函数,接着触发事件的时候,会有ev事件对象
let fn = function (ev) {
// 使用ev.target,拿到触发事件的标签
// console.log(ev.target.value)
data.msg = ev.target.value
}
// 需要一个保存变量的地方
let data = {
msg: ""
}
// 双向数据绑定的原理,数据影响页面
// 使用Object.defineProperty方法,
// 第一个参数是需要监听的对象,第二个参数是键的值,
// 第三个参数是触发set和get方法,固定写法
let _data = {
msg: ""
}
Object.defineProperty(data, 'msg', {
set(value) {
document.getElementById("myInp").innerHTML = value;
document.getElementById('myInp').value = value
_data['msg']=value
},
get() {
return _data['msg']
}
})
