1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery.min.js"></script> 7 <script src="art-template.js"></script> 8 9 10 </head> 11 <body> 12 13 <!--页面内容区--> 14 <div id="content"></div> 15 16 17 <!--处理区--> 18 <script id="test" type="text/html"> 19 <h1>{{title}}</h1> 20 <ul> 21 {{each list as value i}} 22 <li>索引 {{i + 1}} ：{{value}}</li> 23 {{/each}} 24 </ul> 25 26 </script> 27 28 29 <script> 30 var data = { 31 title: '基本例子', 32 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 33 }; 34 var html = template('test', data);//渲染到处理区 35 document.getElementById('content').innerHTML = html;//渲染到页面内容区 36 37 </script> 38 39 </body> 40 </html>
结果如下：
art-template.js下载地址：https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js
官网文档：https://aui.github.io/art-template/zh-cn/docs/installation.html