相对完成版的数据双向绑定

小鱼儿 2022-12-17 07:13 112阅读 0赞

![在这里插入图片描述][20201022151605707.gif_pic_center]

<input id="input" type="text">
    <span id="span">
    <button id="btn">同步更新数据</button>

var input = document.getElementById("input");
            var span = document.getElementById("span");
            var btn = document.getElementById("btn");
            var obj = { 
                msg: "hahahha",
                info: "jian dan de jiandan de jiandan jiandan "
            }
    
            observer(obj);
    
            input.oninput = function (e) { 
                obj.msg = e.target.value;
            }
    
            btn.onclick = function (e) { 
                obj.msg = "初始化了";
            }
            input.value = obj.msg;
            span.innerText = obj.msg;
    
       
            // 数据劫持
            function observer(obj) { 
                for (let key in obj) { 
                    obj[key] = definePro(obj, key, obj[key])
                }
    
            }
            function definePro(obj, key, value) { 
                var coo = new Coo();
                Object.defineProperty(obj, key, { 
                    get() { 
                        coo.add(key);
                        return value;
                    },
                    set(newval) { 
                        coo.update(key, newval);
                        return newval;
                    }
                });
            }
    
            function Coo() { 
                this.con = [];
                this.update = function (key, val) { 
                    this.con.forEach(function (item) { 
                        if (key === item) { 
                            updateView(key, val);
                        }
                    })
                }
                this.add = function (key) { 
                    if (this.con.indexOf(key) === -1) { 
                        this.con.push(key);
                    }
                }
            }
    
            // 更新视图
            function updateView(key, val) { 
                input.value = val;
                span.innerText = val;
            }

[20201022151605707.gif_pic_center]: /images/20221123/d5d8d172c9294288bca6c5212e8cfe0b.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue数据双向绑定

5.Vue数据双向绑定 5.1.什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的

刺骨的言语ヽ痛彻心扉/ 2024年03月30日 09:50/ 0 赞/ 126 阅读

相关 Vue 数据双向绑定

1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单我们可以用 v-model 指令在表单、及元素上创建

一时失言乱红尘/ 2024年03月27日 08:47/ 0 赞/ 156 阅读

相关 Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

系统管理员/ 2023年10月07日 13:31/ 0 赞/ 39 阅读

相关 Vue丐版数据双向绑定

HTML <div id="app"> <form> <input type="text" v-model="number">

迷南。/ 2023年07月13日 04:13/ 0 赞/ 81 阅读

相关相对完成版的数据双向绑定

![在这里插入图片描述][20201022151605707.gif_pic_center] <input id="input" type="text"> <

小鱼儿/ 2022年12月17日 07:13/ 0 赞/ 113 阅读

相关 v html是双向绑定吗,v-model 数据双向绑定

v-model 数据双向绑定 v-model只能在表单元素中使用 Document v-bind绑定 v-model绑定 var vm = new Vue(\{ e

港控/mmm°/ 2022年10月12日 00:53/ 0 赞/ 220 阅读

相关 3、AngularJs的双向数据绑定

1、AngularJs的指令系统 • ng\-app • ng\-controller 2、AngularJs的双向数据绑定

刺骨的言语ヽ痛彻心扉/ 2022年08月23日 08:17/ 0 赞/ 193 阅读

相关 js双向绑定数据

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

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

相关 react数据双向绑定

1，page页面 import React, { PureComponent } from 'react'; import { findDOMNode } f

待我称王封你为后i/ 2022年04月04日 12:38/ 0 赞/ 324 阅读

相关 React双向数据绑定

React双向数据绑定前言：React中的双向绑定是没有提供的，相比vue需要手动写，不过也比较简单，下面看代码示例。什么是双向数据绑定？ PS：m

今天药忘吃喽~/ 2021年09月29日 02:48/ 0 赞/ 437 阅读