前端模板引擎语法

时间:2023-01-03 19:41:08

可以尝试选择自己喜欢的模板

<!--Mustache 的模板 -->
<script id="Mustache" type="text/tmpl">
<ul>
    {{#list}}
        <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li>
    {{/list}}
</ul>
</script>
 
<!-- doT 的模板 -->
<script id="doT" type="text/tmpl">
<ul>
    {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
        {{ val = it.list; }}
        <li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站:{{=val[i].site}}</li>
    {{ } }}
</ul>
</script>
 
<!--juicer 的模板 -->
<script id="juicer" type="text/tmpl">
<ul>
    {@each list as val}
        <li>$${val.index}. 用户: $${val.user}/ 网站:$${val.site}</li>
    {@/each}
</ul>
</script>
 
<!-- artTemplate 的模板 -->
<script id="template" type="text/tmpl">
<ul>
    <% for (i = 0, l = list.length; i < l; i ++) { %>
        <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
    <% } %>
</ul>
</script>
 
<!-- underscore 的模板 -->
<script id="underscoreTemplate" type="text/tmpl">
<ul>
    <% for (var i = 0, l = list.length; i < l; i ++) { %>
        <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
    <% } %>
</ul>
</script>
 
<!-- Handlebars 的模板 -->
<script id="Handlebars" type="text/tmpl">
<ul>
    {{#list}}
        <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li>
    {{/list}}
</ul>
</script>