数据同步 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      姓名：{{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}`);
      alert(obj);
      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];
    });
  }
  </script>
</html>

 

posted @ 2021-05-29 21:46  AngDH  阅读(52)  评论(0)  编辑  收藏  举报