宝哥软件园

es6数据变更同步到视图层的方法

编辑:宝哥软件园 来源:互联网 时间:2021-08-27

数据变更同步到视图层有一个很重要的东西就是代理,代理的作用就是可以隐藏真正的对象,而用户去修改它的代理对象。代理可以监听数据的变化,例如

div id=' test ' name : { { name } } age : { { age } }/div脚本让El=document。getelementbyid(' test ');让datainner={ name:'Jack,age : ' 18 ' }让template=El。innerhtml让数据=新代理(datainner,{ set(obj,name,value){ console。日志(名称')的值被操纵成了value ' value)obj[name]=value;console.log('数据改变了');render() } })数据。名称='成龙'/脚本

可以监控到数据数据的改变,然后就可以将数据渲染到超文本标记语言中,就可以实现es6数据同步到视图层

最终代码

脚本让El=文档。getelementbyid(' test ');让datainner={ name:'Jack,age : ' 18 ' }让template=El。innerhtml让数据=新代理(datainner,{ set(obj,name,value){ console。日志(名称')的值被操纵成了value)obj[name]=值;console.log('数据改变了');render();} })render();//数据渲染函数render(){ El。innerhtml=模板。替换(/ { { w } }/g,str={ str=str.substring(2,str。长度-2);控制台。日志(数据内部[str]);返回datainner[str] }) }/script最终效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+