这篇文章展示了如何利用JavaScript处理JSON数据并动态生成HTML元素，以及LayUI模板引擎如何用于渲染商品列表，包括图片、价格和名称。两种方法都实现了数据驱动的界面更新。
如图：
代码如下：
<!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>
最低0.47元/天 解锁文章
扫一扫
2284
到【灌水乐园】发言
