双向数据绑定几乎是我们在vue中听到的最多的东西。v-model是我们最常见的双向数据绑定指令。那么它究竟是怎么实现的,一起手写一下。
<body>
<input type='text'>
<span class='ppp'></span>
</body>
<script>
let obj = {};
let temp;
let ipt = document.querySelector('input');
ipt.oninput = function(){
obj.a = ipt.value;
}
//获取焦点 并且用户修改了值
Object.defineProperty(obj,'a',{
get:function(){
return temp;
},
set:function(val){
temp = val;
ipt.value = val;
document.querySelector('ppp').innerHTML = val;
}
})
//当我们obj中的a属性发生变化后,input的值跟着改变
//input的值发生变化后,obj的a属性也跟着改变
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。