<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./lib/js/jquery.min.js"></script>
<script src="./lib/js/art-template.js"></script>
<title>Document</title>
</head>
<body>
<div id="middle">
</div>
<script type="text/html" id="article-detail">
{{each articleList value index}}
<h3 class="title">{{value.title}}</h3>
<p class="content">{{value.content}}</p>
{{/each}}
</script>
<script>
var data={
articleList:[{
title:"我和我的小生活",
content:"进行一下简单的练习，早上好！"
},
{
title:"泼猴",
content:"有一天也想要变得成功"
},
{
title:"好哈学习",
content:"天天向上吧"
},
]
}
const htmlStr=template('article-detail',data);
$('#middle').html(htmlStr);
</script>
</body>
</html>
等价于下面的写法，要找不同哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./lib/js/jquery.min.js"></script>
<script src="./lib/js/art-template.js"></script>
<title>Document</title>
</head>
<body>
<div id="middle">
</div>
<script type="text/html" id="article-detail">
{{each articleList }}
<h3 class="title">{{$value.title}}</h3>
<p class="content">{{$value.content}}</p>
{{/each}}
</script>
<script>
var data={
articleList:[{
title:"我和我的小生活",
content:"进行一下简单的练习，早上好！"
},
{
title:"泼猴",
content:"有一天也想要变得成功"
},
{
title:"好哈学习",
content:"天天向上吧"
},
]
}
const htmlStr=template('article-detail',data);
$('#middle').html(htmlStr);
</script>
</body>
</html>