原生JS 将数组的数据循环遍历到HTML中
html如下(图片地址为本地保存的)<div id="article"><!-- <div class="info"><div class="top"><p class="shopName">第一烤场特色石棉烤肉</p><p class="one"></p><p class="two">1</p></div><img class="shopPhoto" src="./img/01.png.webp"><div class="center"><span class="member">会员优惠：<span class="goShop">进店即免费赠送雪花牛肉一份</span></span></div><div class="footer"><p class="scan">扫码进入商家的美团店铺</p><img class="shopScan" src="./img/a01.png"/></div></div> --></div>javascript//模拟json格式数据var data = [{id:"1",name:"第一考场特色石棉烤肉",memberFavourable:"进店即免费赠送雪花牛肉一份",img:"./img/01.png.webp",scan:"./img/a01.png"},{id:"2",name:"第一考场特色石棉烤肉",memberFavourable:"进店即免费赠送雪花牛肉一份",img:"./img/02.png.webp",scan:"./img/a02.png"},{id:"3",name:"第一考场特色石棉烤肉",memberFavourable:"进店即免费赠送雪花牛肉一份",img:"./img/03.png.webp",scan:"./img/a03.png"},];var loveStr = ''data.forEach(e => {loveStr += `<div class="info"><div class="top"><p class="shopName">${e.name}</p><p class="one"></p><p class="two">${e.id}</p></div><img class="shopPhoto" src="${e.img}"><div class="center"><span class="member">会员优惠：<span class="goShop">${e.memberFavourable}</span></span></div><div class="footer"><p class="scan">扫码进入商家的美团店铺</p><img class="shopScan" src="${e.scan}"/></div></div>` })//渲染到htmldocument.getElementById('article').innerHTML = loveStrcss代码如下（样式随便写写）#article{margin-top: 60px;}#article .info .top{box-shadow: rgb(209, 209, 209) 0px 0px 5px 0px;color: rgb(226, 86, 27);border-top-right-radius: 6px;border-bottom-right-radius: 6px;width: 240px;height: 50px;line-height: 50px;text-align: center;margin-left: 55px;position: relative;padding-left: 10px;}.top .shopName{font-size: 16px;font-weight: bold;letter-spacing:1.5px;color: rgb(226, 86, 27);}.top .one{height: 0px;width: 0px;border-top: 0.4em solid transparent;border-right: 12px solid color:rgb(226, 86, 27);border-bottom: 0em solid transparent;overflow: hidden;box-sizing: border-box;position: absolute;top:-15px;left: 0;}.top .two{width: 2em;height: 2em;background: rgb(226, 86, 27);text-align: left;line-height: 2em;color: rgb(255, 255, 255);font-size: 16px;position: absolute;top:-9px;left: 0;}.center{margin-top: 10px;margin-left: 40px;}.center .member{color:rgb(136, 136, 136);font-size: 17px;font-weight: bold;}.center .goShop{font-size: 13px;color:rgb(136, 136, 136);}.shopPhoto{width: 290px !important; height: auto;margin-left: 35px;display: block;margin-top: 10px;}.footer .scan{font-size: 13px;color:rgb(136, 136, 136);margin-left: 60px;}.footer .shopScan{width: 150px;height: auto;margin-left: 40px;}
