<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="jquery-1.12.2.js"></script>
<script src="template-native.js"></script>
<script src="template.js"></script>
<style>
table {
width: 600px;
border-collapse: collapse;
}
td {
height: 40px;
text-align: center;
border: 1px solid #CCC;
}
div img{
display: inline-block;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>模板引擎遍历图片对象</h1>
<div>
<!--这里插入模板-->
<!--要先写模板，再写script事件，否则会读取不到模板数据-->
</div>
</body>

+++++++++++++++++++++++++++++++++++++++++++++++++++++这里是模板遍历重点
<script id="test" type="text/html">//遍历list里的src
{{each list as item i}}
<img src="{{item.src}}"/>
{{/each}}
</script>

++++++++++++++++++++++++++++++++++++++++++++++++++++++这里是模板遍历重点

//尽量把json写成对象数组形式

<script>
var data={
list:[
{src:'http://oh99679zy.bkt.clouddn.com/1.jpg'},
{src:'http://oh99679zy.bkt.clouddn.com/100.jpg'},
{src:'http://oh99679zy.bkt.clouddn.com/101.jpg'},
{src:'http://oh99679zy.bkt.clouddn.com/102.jpg'}
]
}
var html=template('test',data);
$("div").html(html);//插入div标签里
</script>
</html>

template.js遍历对象的写法的更多相关文章

  1. js遍历对象的属性和方法

    js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...

  2. JS遍历对象或者数组

    一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...

  3. js 遍历对象属性(for in、Object.keys、Object.getOwnProperty) 以及高效地输出 js 数组

    js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...

  4. 辨析js遍历对象与数组的方法

    1     遍历对象的方法? (1) for-in(也可遍历数组,但效率较低,一般用来遍历对象) 示例: // 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象 const data = Ob ...

  5. JS 遍历对象 jQuery遍历对象

    jquery for 循环遍历对象的属性: //对象的定义如下: var person={id:"1",name:"springok",age:25}; for ...

  6. js遍历对象属性

    对象虽然与数组一样,都是数据的集合. 因为对象中的数据是处于无序状态,不能像数组那样,使用下标来遍历对象的所有属性. 如果要遍历对象属性,就必须要使用for in 语句. var a={ A1=180 ...

  7. JS遍历对象和数组总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...

  8. JS遍历对象的几种方法

    几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那 ...

  9. JS遍历对象的属性和值

    对于需要动态获取对象的某些属性和对应的值的时候,就需要遍历对象的属性和值. const user = { name: '张三', age: 20, addr: '湖北武汉', sex: '男' } / ...

随机推荐

  1. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  2. java-final关键字

    一.final理解 编程语言中关键字,final类不能被继承,因此final类的成员方法没有机会被覆盖,默认都是final的.在设计类时候,如果这个类不需要有子类,类的实现细节不允许改变,并且确信这个 ...

  3. PLC数据访问

    PLC是很多机床设备上都有的控制中心,和PLC通信是很多做工厂管理系统的必经之路. 一年前有个项目需要和PLC(西门子S200)通信,不仅读取里面的数据,还需要写数据需要控制机床的运行,当时不大了解, ...

  4. window安装jekyll

    安装Ruby Ruby 切记添加环境变量: 安装 RubyGems RubyGems 解压后进入目录输入: ruby setup.rb 安装Jekyll gem install jekyll 安装je ...

  5. JQuery实现列表中复选框全选反选功能封装

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...

  6. MySql中常用的hint

    对于经常使用Oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在MySQL里,也有类似的hint功能.下面介绍一些常用的. 强制索引 FORCE ...

  7. SQL中PIVOT 行列转换

    来源:http://www.studyofnet.com/news/295.html PIVOT通过将表达式某一列中的唯一值转换为输出中的多个列来旋转表值表达式,并在必要时对最终输出中所需的任何其余列 ...

  8. Alembic

    Layers of the Library:  AbcA(low)  -->  Abc  -->  AbcGeom(high) Container Hierarchy in Alembic ...

  9. springmvc登陆拦截案例

    一.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...

  10. Scala的几个小tips

    1. Main方法只能写在object而不是class里 2. Unit test只能针对class或者trait,不能给object做,解决方法,把object里面要测的方法拿出来放到trait里, ...