Two way data binding is almost the most we hear about in Vue. V-model is our most common bidirectional data binding instruction. So how does it work? Let’s write it together.
<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;
}
//Gets the focus and the user modifies the value
Object.defineProperty(obj,'a',{
get:function(){
return temp;
},
set:function(val){
temp = val;
ipt.value = val;
document.querySelector('ppp').innerHTML = val;
}
})
//When the a attribute in obj changes, the value of input changes
//When the value of input changes, the a attribute of obj changes
</script>