art.template 循环里面分组。

后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢?
下面就是解决方案:
<h2>循环4个一组</h2>
<script type="text/html" id="temp1">
<b>
{{each rows as item i}}
{{if i%4==0}}<b>【{{/if}}
{{item.userName}}
{{if i>0 && (i-3)%4==0}}】</b>{{/if}}
{{/each}} </ul>
</script> <script>
var data={
"rows":[
{"userName":"项目1"},
{"userName":"项目2"},
{"userName":"项目3"},
{"userName":"项目4"},
{"userName":"项目5"},
{"userName":"项目6"},
{"userName":"项目7"},
{"userName":"项目8"},
{"userName":"项目9"},
{"userName":"项目10"},
{"userName":"项目11"},
{"userName":"项目12"},
{"userName":"项目13"},
{"userName":"项目14"},
{"userName":"项目15"},
{"userName":"项目16"},
{"userName":"项目17"},
{"userName":"项目18"},
{"userName":"项目19"},
{"userName":"项目20"}
]
}
var html=template("temp1",data) document.write(html) </script>
如果这篇文章对您有帮助,您可以打赏我

技术交流QQ群:15129679
art.template 循环里面分组。的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- 利用art.template模仿VUE
首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- Ajax接收Json数据,调用template模板循环渲染页面的方法
一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...
- hdu 1712 ACboy needs your help 分组背包
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem ...
- Pandas 基础(7) - Group By 分组的相关知识
首先, 引入这节需要的 csv 文件 (已上传) import pandas as pd city_df = pd.read_csv('/Users/rachel/Sites/pandas/py/pa ...
- HDU1712:ACboy needs your help(分组背包模板)
http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem Description ACboy has N courses this term, an ...
- HDU1712:ACboy needs your help(分组背包)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1712 解释看这里:http://www.cnblogs.com/zhangmingcheng/p/3940 ...
随机推荐
- [主席树 强制在线]ZOJ3888 Twelves Monkeys
题意:有n年,其中m年可以乘时光机回到过去,q个询问 下面m行,x,y 表示可以在y年穿越回x年, 保证y>x 下面q个询问, 每个询问有个年份k 问的是k年前面 有多少年可以通过一种以上($\ ...
- cf1108e 线段树区间更新+扫描线
/* 有点像扫描线 思路:从左到右枚举每个点,枚举到点i时,把所有以i为起点的区间的影响删去 再加上以i-1为结尾的区间的影响 */ #include<bits/stdc++.h> usi ...
- select 禁止 选择
禁止select控件選擇 大家知道, 對於HTML控件select, 是沒有readOnly屬性的,所以設置它並不起作用,如: <select id="select1" re ...
- Linux学习笔记(Ubuntu操作系统)之hadoop学习之路
1:检查虚拟机的ip命令:ifconfig 2:普通用户切换root用户命令:su 3:root用户切换普通用户命令:su 用户名 4:普通用户执行系统执行前面加命令:sudo 5:查询主机名命令:h ...
- Codeforces Round #228 (Div. 1)
今天学长给我们挂了一套Div.1的题,难受,好难啊. Problem A: 题目大意:给你n个数字,让你叠成n堆,每个数字上面的数的个数不能超过这个数,如 3 上面最多放三个数字 问你,最少能放几堆. ...
- Linux !的使用
转自:https://www.linuxidc.com/Linux/2015-05/117774.htm 一.history 78 cd /mnt/ 79 ls 80 cd / 81 history ...
- Pig和Hive的对比
Pig Pig是一种编程语言,它简化了Hadoop常见的工作任务.Pig可加载数据.表达转换数据以及存储最终结果.Pig内置的操作使得半结构化数据变得有意义(如日志文件).同时Pig可扩展使用Java ...
- 6-2 S树 uva712
这题关键是 反转 查询是固定按照x1x2x3来的 那么先收集前面的顺序 然后在数组里面直接调用即可 比如前面的树是 x3 x1 x2 就把这个当作数组下标 最左边的树是 1<&l ...
- Spring bean加载多个配置文件
除了写很简单的加载一个xml,加载多个的情况一直没用到,在公司里也不会由自己处理这个问题,现在需要用到了,就研究验证一下. 使用的案例还是上面的例子. 只有,将原来的beans.xml分成两个部分. ...
- 如何修改 FastAdmin 弹窗大小?
如何修改 FastAdmin 弹窗大小? 参考代码 1 如下: buttons: [ { name: 'start', , , , extend: 'data-area=\'["350px& ...