后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢?

下面就是解决方案:

<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 循环里面分组。的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  3. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  4. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  5. Ajax接收Json数据,调用template模板循环渲染页面的方法

    一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...

  6. hdu 1712 ACboy needs your help 分组背包

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem ...

  7. Pandas 基础(7) - Group By 分组的相关知识

    首先, 引入这节需要的 csv 文件 (已上传) import pandas as pd city_df = pd.read_csv('/Users/rachel/Sites/pandas/py/pa ...

  8. HDU1712:ACboy needs your help(分组背包模板)

    http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem Description ACboy has N courses this term, an ...

  9. HDU1712:ACboy needs your help(分组背包)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1712 解释看这里:http://www.cnblogs.com/zhangmingcheng/p/3940 ...

随机推荐

  1. Linux下搭建ruby on rails环境

    要搭建的东西:Ruby 1.8.7,Rails 2.3.8,rubygem 1.3.7 1.安装ruby sudo apt-get install ruby-full 2.安装rubygem sudo ...

  2. bootstrapTable 参数说明

  3. Hibernate之一级缓存和二级缓存

    1:Hibernate的一级缓存: 1.1:使用一级缓存的目的是为了减少对数据库的访问次数,从而提升hibernate的执行效率:(当执行一次查询操作的时候,执行第二次查询操作,先检查缓存中是否有数据 ...

  4. Struts2(接受表单参数)请求数据自动封装和数据类型转换

    Struts2请求数据自动封装: (1)实现原理:参数拦截器 (2)方式1:jsp表单数据填充到action中的属性:        普通的成员变量,必须给set,get可以不给的.    注意点,A ...

  5. mongodb 备份

    本篇文章来自于阿里云技术专家郑涔(明俨)在2018年<Redis.MongoDB.HBase大咖直播大讲堂>技术直播峰会中的分享,该分享整体由四个部分构成: 1.MongoDB备份恢复 2 ...

  6. 【UER #1】DZY Loves Graph(待卡常数)

    题解: 正解是可持久化并查集 但这个显然是lct可以维护的 但这常数是个问题啊??? #include <bits/stdc++.h> using namespace std; struc ...

  7. PIGS

    题解: 考虑建立一个分层图,从s向猪圈连边,容量为初始容量, 猪圈向第一个顾客连边,容量为INF 顾客向汇点连边,容量为购买量 这样一轮就搞完了,考虑下一个顾客 由于上一轮被顾客访问的猪圈都互通了,那 ...

  8. openstack学习-glance安装(三)

    glance在openstack负责镜像相关管理的,对外提供标准的api提供服务,glance有两个服务,一个是glance-api接受云系统镜像的创建.删除.读取请求.glance-registry ...

  9. Codeforces Round #216 (Div. 2)

    以后争取补题不看别人代码,只看思路,今天就是只看思路补完的题,有点小激动. A. Valera and Plates 水题,贪心地先放完第一种食物,在考虑第二种. 居然被卡了一会,心态要蹦 :(: # ...

  10. BZOJ1786 [Ahoi2008]Pair 配对 动态规划 逆序对

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1786 题意概括 给出长度为n的数列,只会出现1~k这些正整数.现在有些数写成了-1,这些-1可以变 ...