模板引擎

最新推荐文章于 2024-07-15 23:03:53 发布

卟良亻

最新推荐文章于 2024-07-15 23:03:53 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/weixin_42595284/article/details/82766009

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
		模板引擎：以业务逻辑层和表现层相分离为目的，将规定的格式代码的模块转化为业务数据的算法实现使用模板引擎
		1.准备数据
		2.下载template-native.js --原生语法的js插件
		3.引入插件
		4.创建模板： 在HTML页面创建<script type='text/template' id = ''></script>
		5.把数据使用在模板中
			有两个参数 	template('关联的id名'，必须是对象{方法名对应的数据})

	 -->
	 <!-- 创建模板 -->
	 <table>
	 	<!-- 作为一个标记，一般表示 -->
	 	<!-- TODO -->
	 </table>
	 <script type="text/template" id="template">
	 	<% for(var i = 0; i < list.length; i++) { %>
		<% var item = list[i]; %>
	 	<tr>
	 		<td><%=item.userName %></td>
	 		<td><%=item.age %></td>
	 	</tr>

	 	<% } %>
	 </script>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	 <script src="微金所案例/lib/artTemplate/template-native.js"></script>
	 <script>
	 	var data = [
	 		{'userName':'xiaoming','age':'18岁'},
	 		{'userName':'xiaohong','age':'22岁'},
	 		{'userName':'xiaobai','age':'28岁'},
	 	]
	 	var html = template('template',{list:data});

	 	$('table').html(html);
	 </script>
</body>
</html>