<!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. 面向amd64的XXX与与项目的目标平台“x86”不兼容

    打开IIS服务器,选择应用程序池,设置中,有一个打开32位程序,选择FALSE,如果开启,在64位下就会出错.一般关闭

  2. 依赖注入 – ASP.NET MVC 4 系列

           从 ASP.NET MVC 3.0 开始就引入了一个新概念:依赖解析器(dependence resolver).极大的增强了应用程序参与依赖注入的能力,更好的在 MVC 使用的服务和创 ...

  3. ivy 配置 maven代理

    Ivy 是一个依赖管理工具,直观感受是其跟maven 的作用差不多:但这两个其实是不同的工具: maven 是面向整个项目的工程管理及构建工具:ivy 仅作为依赖管理工具,与ant 高度集成. 需要了 ...

  4. Nginx泛解析的匹配域名绑定到子目录配置

    网站的目录结构为: # tree /home/wwwroot/linuxeye.com /home/wwwroot/linuxeye.com ├── bbs │   └── index.html └─ ...

  5. 读取其他软件listview控件的内容

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. ORACLE 简化拼接

    and (in_sample.TEAM_GROUP = p_teamGroup or p_teamGroup is null);

  7. [Linux] -Docker修改空间大小

    Docker默认空间大小分为两个,一个是池空间大小,另一个是容器空间大小. 池空间大小默认为:100G 容器空间大小默认为是:10G 所以修改空间大小也分为两个: 这里使用centos下的yum进行安 ...

  8. MyBatis入门学习教程-使用MyBatis对表执行CRUD操作

    上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...

  9. zookeeper在集群负载均衡中的应用

    zookeeper本身是不提供负载均衡的策略,需要自己来实现,所以这里确切的说,是在负载均衡中应用到了zookeeper做集群的协调. 对于HTTP请求的负载均衡,成熟的解决方案是Nginx(或Hap ...

  10. shared_ptr 线程安全

    Then what's really happening is TWO different sections of memory are being allocated. It's done at o ...