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

下面就是解决方案:

<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. 【mysql】autocommit=0后,commit, rollback无效

    之前在[mysql]MySQLdb中的事务处理中用autocommit和commit()以及rollback()实现了事务处理. 但后来,用同样的代码在另一个数据库中运行却失败了.找了一个下午的原因. ...

  2. java util Aarrys 类

    toString方法  产生一维数组的二维版本 public static String toString(type[] a) { //type 是传入数据类型 if (a == null) retu ...

  3. web----粘包

    一.什么是粘包 所谓粘包问题主要还是因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的. 须知:只有TCP有粘包现象,UDP永远不会粘包 粘包不一定会发生 如果发生了:1.可能是在 ...

  4. python接口自动化测试十七:使用bs4框架进行简单的爬虫

    安装:beautifulsoup4 from bs4 import BeautifulSoup yoyo = open('yoyo.html', 'r')   # 以读的方式打开“yoyo.html” ...

  5. tomcat常用的配置

    这里我们使用tomcat版本:apache-tomcat-7.0.77-windows-x64.zip 为例:下载链接地址为:https://archive.apache.org/dist/tomca ...

  6. js自定义修改复选框单选框样式,清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  7. P3420 [POI2005]SKA-Piggy Banks

    P3420 [POI2005]SKA-Piggy Banks套路题,a通过某种关系和其他的点建立关系.这种题不是环(dfs就可以了),就是并查集找连通块.这种题要建图,画图,就很清楚了. #inclu ...

  8. 【*】CAS 是什么,Java8是如何优化 CAS 的

    文章结构 前言 想要读懂 Java 中的并发包,就是要先读懂 CAS 机制,因为 CAS 是并发包的底层实现原理.本文主要讨论  CAS 是如何保证操作的原子性的  Java8 对 CAS 进行了哪些 ...

  9. 破解百度云盘MAC下载限速问题

    由于电脑更新问题,所以把电脑上的所有东西清除了.突然发现自己以前的东西还都在百度云盘上,但由于MAC 下载百度云盘上的东西只有几K或者几十K,这个网速对于小文件还能忍受,但如果是大文件就无法容忍了. ...

  10. Excel获取第一个表名

    Excel.Worksheet wsheet1 = (Excel.Worksheet)excelSql.Worksheets.get_Item(); wsheet1.Name获取sheet名称