这篇文章主要介绍了如何用js实现Vue2.0中数据的双向绑定功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何用js实现Vue2.0中数据的双向绑定功能文章都会有所收获，下面我们一起来看看吧。

创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为凌源企业提供专业的网站设计制作、做网站，凌源网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

Object.defineProperty了解

语法：

Object.defineProperty(obj, prop, descriptor)

• obj  要定义属性的对象。

• prop 要定义或修改的属性的名称

• descriptor 要定义或修改的属性描述符

obj和prop很好理解 比如我们定义一个变量为

const o = {
    name:"xbhog"
}

其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor

descriptor  目标对象属性的一些特征（是一个对象）
   descriptor  下有6个参数
 参数1：
     value:属性值
 参数2：
 　　writable：对象属性值是否可以被修改  true允许  false不允许
 参数3：
 　　configurable:对象属性是否可以被删除 true允许  false不允许
 参数4：
 　　enumerable:对象属性是否可被枚举
 参数5：
     get():是个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值
 参数6：
     set():是个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，赋值的新值

注意：描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系，只能存在一个

了解了前置知识，我们来实现Vue中的v-model的双向绑定

先看实现代码：

    
    


    


你好：更新数据

首先我们通过document.querySelector获取input以及span标签的Html对象，在定义一个data对象，属性name先为空。

使用事件监听oninput来监听用户输入(该事件在 或 元素的值发生改变时触发)。</p><p>将ipt.value中的值传给data.name的value；</p><pre>data.name = ipt.value;</pre><p>利用Object.defineProperty劫持用户输入的数据。</p><ul><li><p>get 属性：是个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值</p></li><li><p>set 属性：是个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，赋值的新值</p></li></ul><pre>Object.defineProperty(data,"name",{     // 数据订阅     get(){        return ipt.value;  //当访问data.name时候会调用get方法，调用ipt.value获取当前value的值     },     // 数据劫持     set(value) {   //设置数据的时候会自动调用set方法         p.innerHTML = value;         ipt.value = value;     }</pre><p><strong>看效果比较明显：</strong></p><p>set方法：</p><p><img src="/upload/otherpic69/208611.png" alt="如何用js实现Vue2.0中数据的双向绑定功能"></p><p>get方法：</p><p><img src="/upload/otherpic69/208612.png" alt="如何用js实现Vue2.0中数据的双向绑定功能"></p><p>最后实现效果：</p><p><img src="/upload/otherpic69/208613.png" alt="如何用js实现Vue2.0中数据的双向绑定功能"></p><p>关于“如何用js实现Vue2.0中数据的双向绑定功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何用js实现Vue2.0中数据的双向绑定功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。</p> <br> 网页题目：如何用js实现Vue2.0中数据的双向绑定功能 <br> 文章起源：<a href="http://mswzjz.cn/article/pdsjsc.html">http://mswzjz.cn/article/pdsjsc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/pchpsp.html">Tivoli_oracle采用客户端远程监控问题</a> </li><li> <a href="/article/pchpic.html">在Android项目中添加一个商品预订功能</a> </li><li> <a href="/article/pchpei.html">netflow网络流量管理</a> </li><li> <a href="/article/pchpsj.html">navicat连接不上服务器的原因是什么</a> </li><li> <a href="/article/pchpco.html">nodeJS服务器的创建和重新启动的实现方法</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求