JS实现简单双向数据绑定

114 阅读1分钟

学习Object.defineProperty()函数实现数据双向绑定

html代码:

<input id="in" placeholder="请输入..." />
<div>输入的数据是:<span id="show"></span></div>

JS代码:

let obj = {}
Object.defineProperty(obj, 'txt', {
    set(value) {
        document.getElementById('show').innerText = value
    },
    get() {
    	return obj
    }
})
let input = document.getElementById('in')
input.addEventListener('keyup', function (event) {
    obj.txt = event.target.value
})