JS中art-template模板使用if判断

最新推荐文章于 2024-04-06 18:02:38 发布

原创最新推荐文章于 2024-04-06 18:02:38 发布 · 8.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#art-template #Demo #javascript #模板引擎 #if判断

JS 同时被 2 个专栏收录

21 篇文章

订阅专栏

Demo

6 篇文章

订阅专栏

本文介绍了一个使用JS模板引擎渲染JSON数据的示例，展示了如何将包含商品信息的JSON数组通过HTML模板转换为网页上的商品列表，包括不同商品标记的条件渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS代码：

	// json数据
	var json=[
		{
			"id": 1,
			"good_sign": 2,
			"good_img": "http://dummyimage.com/460x440/ee79f2/79f2cb.png&text=商品\n"
		},
		{
			"id": 2,
			"good_sign": 1,
			"good_img": "http://dummyimage.com/460x440/f2a779/8479f2.png&text=商品\n"
		},
		{
			"id": 3,
			"good_sign": 0,
			"good_img": "http://dummyimage.com/460x440/91f279/f279b4.png&text=商品\n"
		},
		{
			"id": 4,
			"good_sign": 1,
			"good_img": "http://dummyimage.com/460x440/79d7f2/f2e979.png&text=商品\n"
		}
	]
	// 渲染json
	$("#container").html(template("indexmain",json));

HTML代码：

	<div id="container"></div>
	
	<script type="text/html" id="indexmain">
		<!-- 商品列表 -->
		<ul>
			{{each list item}}
			<li>
				<a href="javascript:;">
					{{if item.good_sign==1}}
					<div class="ico-comm i-mark">
						 <span>新品</span>
					</div>
					{{else if item.good_sign==2}}
					<div class="ico-comm i-mark">
						 <span>热卖</span>
					</div>
					{{/if}}
					<img src="{{item.good_img}}" alt="商品图">
				</a>
			</li>
			{{/each}}
		</ul>
	</script>