原生js layui模板引擎使用

HTML代码:

<div id="dayOvertime" style="border:1px solid #e2e2e2;"></div>

JS代码:

        <script id="lateTimeLaytpl" type="text/html">
          {{#  layui.each(d, function(index, item){ }}
          {{#  if(index%2 === 0){ }}
            <div style="display:flex;padding:10px">
                <div>{{item.date}}</div>
                <div style="margin-left:10px;display:flex">{{item.type}}<div style="color:#000;font-weight:bold">{{item.time}}</div>{{item.unit}}</div>
            </div>
            {{#  } else { }} 
            <div style="display:flex;background-color:#e2e2e2;padding:10px">
                <div>{{item.date}}</div>
                <div style="margin-left:10px;display:flex">{{item.type}}<div style="color:#000;font-weight:bold">{{item.time}}</div>{{item.unit}}</div>
            </div>
            {{#  } }}
          {{#  }); }}
          {{#  if(d.length === 0){ }}
            无数据
          {{#  } }} 
        </script>
var data = []
var getTpl = lateTimeLaytpl.innerHTML
     ,view = document.getElementById('dayOvertime');
 laytpl(getTpl).render(data, function(html){
     view.innerHTML = html; });

 

posted @ 2023-05-09 10:05  Yimuqiao  阅读(142)  评论(0)    收藏  举报