原生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; });

浙公网安备 33010602011771号