该实例模拟实现Vue中 v-model
实现双向绑定的原理
html部分,一个 input
标签输入,h2
标签用来显示输入的数据
<input type="text">
<h2></h2>
js部分:
let input=document.querySelector('input')
let h2=document.querySelector('h2')
let obj={
msg:'haha'
}
input.value=obj.msg
h2.innerText = obj.msg
input.addEventListener('input',function(e){
obj.msg = e.target.value
})
//Object.defineproperty 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
Object.defineProperty(obj, 'msg', {
set:function(val){
h2.innerText = val
}
})