<div> <ul class="container"> <script id="temp" type="text/html"> {{each $data item i}} <li> {{item.name}} {{if i <2}} <i>hot</i> {{/if}} </li> {{/each}} </script> </ul> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script src="./artTemplate.js"></script> <script> $.get('http://simbajs.com:89/sys/menu', data => { let str = data.filter(r => r.pid===0) console.log(str) let app = template('temp',str) $('.container').html(app) }) </script>
js 模板引擎 可以实现向后端请求数据实现页面的元素的生成 jquery 也可以做到 但代码空缺给同行的的人阅读带来一定难度 模板引擎就可以方便直接将js 代码片段与html相结合 程序员可以根据需求进行更改 而且代码方便易读懂
上面介绍的是一个简单的列子 通过对数据进行处理 形成一个对象 这样在实际使用过程中方便易使用
let app = template('temp',str) temp是要加在标签的位置id名 str是经过处理过的数据
$('.container').html(app) 最后一定加在标签里