双向绑定

Posted 2021-05-29 AngDH

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了双向绑定相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      <input type="text" v-model="name"><br>
      姓名：{{name}}<br>
      年龄：{{age}}
    </div>
  </body>
  <script>
  let el=document.getElementById(\'div1\');

  let template=el.innerHTML;

  let _data={
    name: \'blue\',
    age: 18
  };

  let data=new Proxy(_data, {
    set(obj, name, value){
      //alert(`有人视图设置 ${name}=>${value}`);
      obj[name]=value;

      //数据变了
      //console.log(\'数据变了\');
      render();
    }
  });

  render();

  function render(){
    //渲染
    el.innerHTML=template.replace(/\\{\\{\\w+\\}\\}/g, str=>{
      str=str.substring(2, str.length-2);

      return _data[str];
    });

    //找所有的v-model
    Array.from(el.getElementsByTagName(\'input\'))
      .filter(ele=>ele.getAttribute(\'v-model\'))
      .forEach(input=>{
        let name=input.getAttribute(\'v-model\');
        input.value=_data[name];

        input.oninput=function (){
            console.log(this);
          data[name]=this.value;
        };
      });
  }
  </script>
</html>

以上是关于双向绑定的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序复杂对象的双向绑定(附代码可直接使用)