废话不多说直接看效果图
代码很好理解，但是在看代码之前需要知道 Vue 双向绑定的原理其实就是基于 Object.defineProperty 实现的双向绑定 官方传送门
这里我们用官方的话来说 Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。语法：Object.defineProperty(obj, prop, descriptor) 参数 obj：要在其上定义属性的对象。prop：要定义或修改的属性的名称。descriptor：将被定义或修改的属性描述符。
这里面要说的真的就太多了，我们就调双向绑定需要用到的说一下就可以了，需要了解更多的朋友可以进官网官网看更加详细的
这里我们就只是说一下 Object.defineProperty 里面的核心的 get 和 set
get
let data ={} ;
let index = 1;
Object.defineProperty(data,”age”,{ // 不明白参数什么含义的请往上看咯
get:function(){
return index;// 获取到了定义的 index 变量
}
})
console.log(data); // {age:1}
怎么样，是不是非常简单，那么我们趁热赶紧看一下 set 吧
set
var data ={} ;
var index= 1;
Object.defineProperty(data,”age”,{
get:function(){
return index;
},
set:function(newZhi){
index=newZhi;
}
})
console.log(data);// {age:1}
哈哈 是不是感觉和上面的 get 是一样的呢？用法都是一样的 那么楼主能来点不一样的嘛？
回答：可以
———-
Object.defineProperty(data,”age”,{
get:function(){
return index;
},
set:function(newZhi){
index=newZhi+10;
}
})
console.log(data); // {age:11}
既然 Object.defineProperty 里面的 set 和 get 看懂了就可以直接上手简单的双向绑定啦，这时候有的小伙伴可能就问了：什么？这么快？回答：就是这么快直接贴代码 每一行都是有注释的 赶紧看看吧
<body>
<input type=”text” id=”inp”/>
<div id=”text”> 我是测试数据的 </div>
</body>
<script type=”text/javascript”>
const inp = document.getElementById(“inp”),tex=document.getElementById(“text”), data = {};// 获取两个元素
Object.defineProperty(data,”name”,{
get:function(){
return inp.value;// 获取到文本框 value 输入的值
},
set:function(newdata){// 接收到文本框 value 的值
tex.innerHTML = newdata;//div 的值等于文本框的值
}
})
inp.addEventListener(“keyup”,function(e){// 键盘按下的时候来实时同步
data.name = this.value;
})
</script>
怎么样？是不是很简单呢 十行代码就完事了 (当然只是简单的双向绑定，拓展性很强）