<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: red 1px solid;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="ifBox"></div>
<div id="norBox"></div>
<div id="eachBox"></div>
<!--引入模板引擎:一般用于在网络请求之后，展示相同的多条数据-->
<script type="text/javascript" src="js/template-web.js" ></script>
<!--2.原文输出-->
<script type="text/html" id="norTemplate">
<ul>
<li>{{name}}</li>
<li>{{skill}}</li>
<li>{{@info}}</li>
</ul>
</script>
<script type="text/javascript">
var data = {
name:"漩涡鸣人",
skill:"多重影分身",
info:"<a href='https://baike.baidu.com/item/%E6%BC%A9%E6%B6%A1%E9%B8%A3%E4%BA%BA/322717?fr=aladdin'>个人信息</a>"
};
var result = template("norTemplate",data);
var norBox = document.getElementById("norBox");
norBox.innerHTML = result;
</script>
<!--3.循环语句-->
<script type="text/html" id="eachTemplate">
<ul>
<li>组织: {{key}}}</li>
<li>组员:
{{each person}}
<ol> {{$index}}{{$value}} </ol>
{{/each}}
</li>
<li>组员信息:
{{each info}}
<ol>{{$value.name}} --- {{$value.age}} </ol>
{{/each}}
</li>
</ul>
</script>
<script type="text/javascript">
var family = {
key:"APP开饭团队",
person:[
"刘强",
"黄冲",
"熊斌"
],
info:[
{name:"刘强",age:23},
{name:"黄冲",age:26},
{name:"熊斌",age:22}
]
};
var result = template("eachTemplate",family);
var eachBox = document.getElementById("eachBox");
eachBox.innerHTML = result;
</script>
</body>
</html>
原文链接：https://blog.csdn.net/qq_33429583/java/article/details/79678443