10行代码-原生JS双向数据绑定演示

以你之姓@ 2022-10-01 08:46 136阅读 0赞

很简单的10行代码就可以实现输入框与页面实时显示的绑定，也就是百度一下一大堆的所谓的双向数据绑定，完全没有必要搞那么长

function test() {
      const container = document.createElement('div');
      const inputBar = document.createElement('input');
      container.appendChild(inputBar);
      const textBar = document.createElement('div');
      container.appendChild(textBar);
      inputBar.addEventListener('input', () => textBar.innerHTML = inputBar.value);
      return container;
    }
    document.body.appendChild(test());
    复制代码

创建一个`test.html`试一试：

<html>
    <head>
      <meta charset="UTF-8">
      <title>two-way-binding</title>
    </head>
    <body>
    </body>
    <script> function test() { const container = document.createElement('div'); const inputBar = document.createElement('input'); container.appendChild(inputBar); const textBar = document.createElement('div'); container.appendChild(textBar); inputBar.addEventListener('input', () => textBar.innerHTML = inputBar.value); return container; } document.body.appendChild(test()); </script>
    </html>
    复制代码

演示结果如下：

转载于:https://juejin.im/post/5c91a7ecf265da60cf50eb27

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 10行代码-原生JS双向数据绑定演示

很简单的10行代码就可以实现输入框与页面实时显示的绑定，也就是百度一下一大堆的所谓的双向数据绑定，完全没有必要搞那么长 function test() {

以你之姓@/ 2022年10月01日 08:46/ 0 赞/ 137 阅读

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

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

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

相关 js双向绑定数据

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

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

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

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

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

相关 Vue.js 双向数据绑定

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

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

相关 JS 实现双向数据绑定

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

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