template 的简单使用

最新推荐文章于 2021-05-03 05:16:25 发布

转载最新推荐文章于 2021-05-03 05:16:25 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cyany/p/9497184.html

本文介绍Art-Template的基本用法，包括循环渲染数组元素和条件判断等特性。通过具体示例展示了如何利用模板语法来动态生成HTML内容。

地址：
https://github.com/aui/art-template

基本用法：

循环 img 是数组 value index 注意如果自己没有定义value 和index，的话可以使用｛｛$value｝｝ {{$index}}

{{each img value index}}
                            <img src="{{value.url}}">
                        {{/each}}

判断

{{each p1 value index}}
                                {{if value ==0}}
                                    <p>0 ele</p>
                                {{else if value ==1}}
                                    <p>1 ele</p>
                                {{else}}
                                    <p>other ele</p>
                                {{/if}}
                            {{/each}}

    var data = {
            title:'abcd',
            img:[{url:'https://via.placeholder.com/350x152'},{url:'https://via.placeholder.com/350x152'},{url:'https://via.placeholder.com/350x152'},{url:'https://via.placeholder.com/350x152'}],
            p:['dasjka','adsads','dsads'],
            p1:[0,1,2,3,5]
        };
记得data 是对象形式的
如果请求返回的数据是数组，数组里面放着对象，可以先使用for循环进行template操作


var temp = template('demo',data);
        document.getElementsByClassName('container')[0].innerHTML=temp;