JS中art-template模板使用循环嵌套

6 篇文章 1 订阅

用到了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>	

效果图:
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Art-template是一款高性能、轻量级的模板引擎,适用于Node.js和浏览器环境。它以简洁明了的语法,支持模板继承、条件判断、循环遍历等常见功能,同时还提供了强大的过滤器和自定义标签功能。 Art-template使用逻辑如下: 1. 安装Art-template 可以通过npm安装Art-template,命令如下: ```npm install art-template --save``` 2. 引入Art-template 在Node.js,可以使用require语句引入Art-template: ```const template = require('art-template');``` 在浏览器,可以使用script标签引入Art-template: ```<script src="path/to/art-template.js"></script>``` 3. 编写模板 Art-template使用{{}}包裹变量、表达式或语句。例如,以下是一个简单的模板: ``` <!DOCTYPE html> <html> <head> <title>{{title}}</title> </head> <body> <h1>{{title}}</h1> <p>{{content}}</p> </body> </html> ``` 4. 渲染模板 使用template方法可以将模板渲染成字符串。例如: ``` const template = require('art-template'); const data = { title: 'Art-template', content: 'A lightweight and powerful template engine' }; const html = template('path/to/template', data); console.log(html); ``` 在上面的例子,我们将data对象传递给了模板使用{{}}包裹的变量会被替换成data对象的对应值,最终输出渲染后的HTML字符串。 5. 高级用法 除了基本的变量替换,Art-template还支持模板继承、条件判断、循环遍历等高级用法。例如,以下是一个使用if语句和each语句的模板: ``` {{if isAdmin}} <p>Welcome, admin</p> {{else}} <p>Welcome, user</p> {{/if}} <ul> {{each list}} <li>{{$index}}. {{$value}}</li> {{/each}} </ul> ``` 以上就是Art-template使用逻辑,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值