前端模板引擎（art-template）循环使用方法

最新推荐文章于 2023-05-10 15:24:27 发布

原创最新推荐文章于 2023-05-10 15:24:27 发布 · 7.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

1.首先下载模板引擎art-template
npm i art-template

2.引入模板

<script src="./node_modules/art-template/lib/template-web.js"></script>

注意：要注意引入顺序
3.定义模板
定义一个 type="text/html"的 script标签，使用 each循环结构并且定义一个tps的 ID

<script type="text/html" id="tps">
        <ul>
            {{each list as value}}
            <li>{{value.a}}</li>
            {{/each}}
        </ul>
    </script>

4.给页面容器（模板引擎要放入的容器）定义id

 <div id="box">


    </div>

5.调用模板引擎插入数据并且放在id为box的容器中

<script>
        var div = document.getElementById('box')
        // console.log(div)
        var list = [{
            'a': '王野'
        }, {
            'a': '小明'
        }, {
            'a': '小张'
        }]
        var html = template('tps', {
            list: list
        })  //调用模板引擎
        div.innerHTML = html 
    </script>