<!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>html
+++++++++++++++++++++++++++++++++++++++++++++++++++++這裏是模板遍歷重點
<script id="test" type="text/html">//遍歷list裏的src
{{each list as item i}}
<img src="{{item.src}}"/>
{{/each}}
</script>jquery
++++++++++++++++++++++++++++++++++++++++++++++++++++++這裏是模板遍歷重點json
//儘可能把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>htm