如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="cont" style="display: flex; "></div>
<script>
var json = [{
"pic": "01.png",
"price": 25,
"name": "M121"
},
{
"pic": "02.png",
"price": 35,
"name": "U32G"
}
]
console.log(json);
var html = '';
json.forEach(function(v){
html += `<div style="border: 1px solid blue;margin: 5px;"><img src="${v.pic}" alt="">
<p><span>${v.price}</span></p><p>${v.name}</p></div>`;
})
console.log(html);
var cont = document.getElementById('cont');
cont.innerHTML = html;
</script>
</body>
</html>LayUI 2.8.8 实现
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<script id="demo" type="text/html">
{
{# layui.each(d.list, function(index, item){ }}
<div style="border: 1px solid blue;margin: 5px;"><img src="{
{= item.pic}}" alt="">
<p><span>{
{= item.price}}</span></p><p>{
{= item.name}}</p></div>
{
{# }); }}
{
{# if(d.list.length === 0){ }}
无数据
{
{# } }}
</script>
<div id="cont" style="display: flex; "></div>
<script src="./layui/layui.js"></script>
<script>
var laytpl = layui.laytpl;
var data = { //数据
"title":"Layui常用模块"
,"list":[{"pic": "01.png",
"price": 25,
"name": "M121"}
,{"pic": "02.png",
"price": 35,
"name": "U32G"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('cont');
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
</script>
</body>
</html>