模板引擎emplate-web.js的使用

最新推荐文章于 2024-11-09 20:35:18 发布

来啦来啦~

最新推荐文章于 2024-11-09 20:35:18 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

分类专栏： web study

本文链接：https://blog.csdn.net/qq_43483403/article/details/118683828

web study 专栏收录该内容

39 篇文章

订阅专栏

这篇博客介绍了如何在HTML中使用Template.js库来渲染数据。首先，需要引入template-web.js库，然后定义需要渲染的数据和模板。模板使用了{{each}

一、使用步骤

引入模板引擎js

<script src="/template-web.js"></script>

在需要渲染的数据HTML抽取模板

//需要渲染的数据格式
<tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人</td>
    </tr>
  </tbody>
//模板
<tbody>
	<!-- 表格数据的模板 -->
	<script type="text/html" id="tpl-table">
		{{each data}}
			<tr>
			<td>{{$value.name}}</td>
			<td>{{$value.alias}}</td>
			<td data-id='{{$value.Id}}'>
				<button type="button" class="layui-btn layui-btn-xs btn-edit">编辑</button>
				<button type="button" class="layui-btn layui-btn-danger layui-btn-xs btndel">删除</button>
			</td>
			</tr>
		{{/each}}
	</script>
</tbody>