使用json（或layUI）实现对商品列表页的展示（JavaScript交互特效案例 03）

最新推荐文章于 2023-12-19 20:03:12 发布

PieroPc

最新推荐文章于 2023-12-19 20:03:12 发布

阅读量549

点赞数 3

文章标签： json javascript 数学建模 layui layui.js

本文链接：https://blog.csdn.net/PieroPc/article/details/131360177

版权

如图：

代码如下：

<!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>