雙向數(shù)據(jù)綁定
顧名思義:頁面改變影響數(shù)據(jù),數(shù)據(jù)改變也會影響頁面
頁面影響數(shù)據(jù)
首先是html代碼結(jié)構(gòu)
<body>
<!-- onInput事件,當(dāng)內(nèi)容改變時,馬上出發(fā)input事件 -->
<!-- 在標(biāo)簽上綁定事件,要傳入事件對象 -->
<input type="text" id='myInp' onInput="fn(event)">
</body>
假設(shè)存儲數(shù)據(jù)的對象
let data = {
msg: ""
}
頁面觸發(fā)的函數(shù)事件
let fn = function (ev) {
// 使用ev.target,拿到觸發(fā)事件的標(biāo)簽
// console.log(ev.target.value)
data.msg = ev.target.value
}
測試:
這時候其實(shí)已經(jīng)完成了頁面輸入值,改變了數(shù)據(jù)
數(shù)據(jù)影響數(shù)據(jù)
我們使用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其實(shí)是一個映射關(guān)系,因為當(dāng)你獲取data對象里的msg屬性值的時候, 觸發(fā)get方法
如果在get方法里直接提取data.msg的值, 會造成遞歸調(diào)用卡死.
完整代碼
<body>
<!-- onInput事件,當(dāng)內(nèi)容改變時,馬上出發(fā)input事件 -->
<!-- 在標(biāo)簽上綁定事件,要傳入事件對象 -->
<input type="text" id='myInp' onInput="fn(event)">
</body>
</html>
<script>
// 首先定義一個fn()函數(shù),接著觸發(fā)事件的時候,會有ev事件對象
let fn = function (ev) {
// 使用ev.target,拿到觸發(fā)事件的標(biāo)簽
// console.log(ev.target.value)
data.msg = ev.target.value
}
// 需要一個保存變量的地方
let data = {
msg: ""
}
// 雙向數(shù)據(jù)綁定的原理,數(shù)據(jù)影響頁面
// 使用Object.defineProperty方法,
// 第一個參數(shù)是需要監(jiān)聽的對象,第二個參數(shù)是鍵的值,
// 第三個參數(shù)是觸發(fā)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']
}
})
