纯JS实现列表渲染

作者:Mins 时间:2020-07-09 分类:技术教程

代码如下:

const listFor = (dom, temp, data, cover = false) => {
let res = cover ? '' : dom.innerHTML;
let keys = temp.match(/{{[0-9a-zA-Z]+}}/g);
data.map((dataMap) => {
let values = [];
keys.map((keysMap) => {
values.push(dataMap[keysMap.slice(2, -2)] || '');
})
let item = temp;
values.map((valuesMap) => {
item = item.replace(/{{[0-9a-zA-Z]+}}/, valuesMap);
})
res += item;
})
dom.innerHTML = res;
}

参数说明:

dom:渲染到这个dom里面

temp:html模板,变量用{{}}标记,例如: 

<div>{{name}}</div>

data:需要渲染的数据,接受一个由对象或json组成的数组,如: 

[
{ id: 1, name: 'admin' },
{ id: 2, name: 'master' },
]

cover:是否覆盖原来dom里的内容,默认为false,表示在保留原内容并在后面追加

本文标签: 列表渲染

推荐模板
推荐阅读

欢迎登录模板控!

登录代表您已同意模板控《用户协议》并自愿遵守