版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
用到了jQuery。
JS代码:
// json数据
var json=[
{
"ad_img": "http://dummyimage.com/1180x240/79f28b/f27989.png&text=广告图",
"good": [
{"good_img": "http://dummyimage.com/690x660/f2a979/8679f2.png&text=商品图"},
{"good_img": "http://dummyimage.com/690x660/8ff279/f279b2.png&text=商品图"},
]
},
{
"ad_img": "http://dummyimage.com/1180x240/79d5f2/f2eb79.png&text=广告图",
"good": [
{"good_img": "http://dummyimage.com/690x660/c879f2/79f2a4.png&text=商品图"},
{"good_img": "http://dummyimage.com/690x660/79f2e6/f2c279.png&text=商品图"}
]
}
]
// 渲染json
$("#container").html(template("indexmain",json));
HTML代码:
<div id="container"></div>
<script type="text/html" id="indexmain">
{{each list item}}
<section>
<!-- 商品广告 -->
<a href="javascript:;">
<img src="{{item.ad_img}}" alt="广告图">
</a>
<!-- 商品列表 -->
<ul>
{{each item.good item2}}
<li>
<a href="javascript:;">
<img src="{{item2.good_img}}" alt="商品图">
</a>
</li>
{{/each}}
</ul>
</section>
{{/each}}
</script>
效果图: