js模板推荐tpl推荐

js模板简介

js模板主要是解决js拼接容易出错而产生的,今天推荐一个不到0.5KB的js模板,支持PC电脑和手机,微信,weui+已内置此模板;

使用方法

<div id="content1"></div>
<script id="test" type="text/html">
    <% for (var i=0;i<list.length;i++) { %>
        <div><%=i%>. <%=list[i]%>
         <%=this.title1||'不存在则输出'%>
         <%= (this.t!=undefined)?"存在":"不存在"%>
        </div>
    <%}%>
    <%=title%>
    <% for(var j in list){%>
    
    <%=list[j]%>
    
    <%}%>
</script>
<script>
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = tpl(document.getElementById('test').innerHTML, data);

document.getElementById('content1').innerHTML = html;
</script>

    <div id="content"></div>
<script>
var data={
    txt:"登鹳雀楼",
    list:[
        "白日依山尽",
        "黄河入海流",
        "欲群千里目",
        "更上一层楼"
    ]
}
var tplHTML=' <div><%=txt%></div>'+
        '<% for(var i=0;i<list.length;i++){ %>'+
                    '<p><%=list[i]%></p>'+
                '<% } %>';
var dest=tpl(tplHTML,data);
document.getElementById('content').innerHTML = dest;
</script>

使用注意

参考例子学习使用,建议使用for in处理数组;输出使用<%=%>,函数只有一个,就是tpl,使用方法也很简单就是上边的,如果不存在使用this.var==undefined来判断 不存在就输入默认值;

原生支持下载

没有使用任何插件,javascript原生而写成;
下载 tpl.js


扫码二维码阅读

标签: 微信, 方法, 模板, weui, 出错, 拼接, 简介

添加新评论