js——纯js模拟双向数据绑定

àì夳堔傛蜴生んèń 2022-11-11 05:26 298阅读 0赞

## js——纯js模拟双向数据绑定 ##

**是不是很多人只是知道双向数据绑定的实现效果，并不知道其原理，或是知道其原理并不明白的，  
使用js模拟一个简单的双向数据绑定案例吧，就会变得容易理解**

![在这里插入图片描述][20210319154153862.gif]

### Object.defineProperty() ###

vue双向数据绑定的原理就是它了

html：

<div class='box'>
      // input输入框最能体现双向数据绑定的效果了
      <input type='text' id='text' />
      // 输入内容会同步显示在这里
      <p id='showText'></p>
    </div>

js：

var obj = { }
    var write = document.getElementById('text')
    var read = document.getElementById('showText')
    
    Object.defineProperty(obj, 'text', { 
    // get 获取 重要
      get: function () { 
        return obj
      },
     // set 修改 重要
      set: function (val) { 
        read.innerHTML = val
      }
    })
    // 监听input输入事件，keyup键盘事件中将Object.defineProperty中get到的obj数据赋值
    write.addEventListener('keyup', function (e) { 
      obj.text = e.target.value
    })

### 监听input输入事件，keyup键盘事件中将Object.defineProperty中get到的obj数据赋值，形成最终双向数据绑定的效果 ###

[20210319154153862.gif]: /images/20221022/b5bbc815782042ccba17d41ef8c327fb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，298人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js模拟vue实现双向数据绑定

原生js模拟vue实现双向数据绑定写在前面 vue.js是mvvm模式的框架，如图: ![在这里插入图片描述][watermark_type_ZmF...

布满荆棘的人生/ 2024年04月18日 10:34/ 0 赞/ 75 阅读

相关 4.vue.js属性的绑定与双向数据绑定

属性的绑定 <body> <div id="root" >  <!--<div

￡神魔★判官ぃ/ 2024年02月18日 21:08/ 0 赞/ 39 阅读

相关 js——纯js模拟双向数据绑定

js——纯js模拟双向数据绑定是不是很多人只是知道双向数据绑定的实现效果，并不知道其原理，或是知道其原理并不明白的，使用js模拟一个简单的双向数据绑定案例吧，就会

àì夳堔傛蜴生んèń/ 2022年11月11日 05:26/ 0 赞/ 299 阅读

相关原生js实现vue的数据双向绑定

写在前面 > 很多面试官在面试的时候为了显示自己很牛，喜欢问面试者，你会不会使用原生js实现vue的双向绑定啊，每次我遇到这种面试官我都想揍他一顿，不是说这个问题问得不好

向右看齐/ 2022年10月04日 13:56/ 0 赞/ 227 阅读

相关 vue.js v-model数据双向绑定实例

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍： v-model这个指令只能用在<input>, <sel

冷不防/ 2022年06月17日 14:44/ 0 赞/ 170 阅读

相关原生js实现双向数据绑定

js实现双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta chars

怼烎@/ 2022年05月26日 07:48/ 0 赞/ 228 阅读

相关 js双向绑定数据

转自：http://www.jb51.net/article/107917.htm 前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-

深碍√TFBOYSˉ_/ 2022年05月24日 00:56/ 0 赞/ 258 阅读

相关 Vue.js 双向数据绑定的原理

版权声明：本文为博主原创文章，转载请保留原文链接。 https://blog.csdn.net/meng\_suiga/article/details/77840890

阳光穿透心脏的1/2处/ 2022年05月15日 02:47/ 0 赞/ 289 阅读

相关 Vue.js 双向数据绑定

文章目录 Vue指令之\`v-model\`和\`双向数据绑定\` 简易计算器源代码 Vue指令之`v-model`和`双向

r囧r小猫/ 2022年03月18日 02:52/ 0 赞/ 365 阅读

相关 JS 实现双向数据绑定

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

末蓝、/ 2022年02月21日 14:48/ 0 赞/ 345 阅读