模拟Vue数据双向绑定

     

        //1、根据表单元素内容自动生成obj对象以及对应表单元素属性
        //2、为对象属性赋值后，更新对应表单元素内容;
        //3、更改表单元素内容后，同步更新对象属性值;
        let loginObj=null;
            //初始化创建目标对象
            function initObj(formId){
                //创建目标对象
                let obj={};
                //获取目标表单下所有表单元素
                let inputEles=document.querySelectorAll(`#${formId} input`);
                //遍历input元素
                inputEles.forEach(function(inp){
                    // console.log(inp);
                    //获取表单元素的name属性值(对象的属性名称)
                    let nameVal=inp.name;
                    //获取表单元素的value属性值(对象的属性值)
                    let val=inp.value;
                    // console.log(nameVal,val);
                    Object.defineProperty(obj,nameVal,{
                        set:function(v){
                            //将赋的属性值设置为对应表单值
                            inp.value=v;
                            obj[`_${nameVal}`]=v;
                        },
                        get:function(){
                            return obj[`_${nameVal}`];
                        }
                    });
                    //向目标对象中添加表单对应属性
                    obj[nameVal]=val;
                });
                
                //添加表单元素的change事件(事件委托)
                document.querySelector(`#${formId}`).onchange=function(event){
                    // console.log(event.target);
                    //获取表单元素内容
                    let val=event.target.value;
                    //获取表单元素的name属性值
                    let nameVal=event.target.name;
                    //设置为目标对象属性值
                    obj[nameVal]=val;
                }
                return obj;
            }
            loginObj=initObj('loginForm');

            
          document.querySelector(".dianji").onclick=function(){
              console.log(loginObj);
              console.log( loginObj.email='123456@qq.com');
          }

    <form action="" id="loginForm">
        <input type="text" name="acc" value="admin">
        <input type="password" name="pwd">
        <input type="text" name="tel">
        <input type="text" name="email">
    </form>

    <div class="dianji">
        1
    </div>