通过template模板引擎加载动态html页面问题

最新推荐文章于 2024-08-03 17:59:49 发布

程序员阿瓜

最新推荐文章于 2024-08-03 17:59:49 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/qq_37991944/article/details/100572159

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Html

6 篇文章 0 订阅

订阅专栏

Javascript

5 篇文章 0 订阅

订阅专栏

用template引擎可以解决在js中繁琐的拼接html的字符串问题

代码

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="template.js"></script>
	</head>
	<body>
		<div id="divText"></div>
	</body>
	<!-- 模板 -->
	<script id="templateTest" type="text/template">
		<% for(j in json){item=json[j]; %>
			<% if(j==0){ %>
				<div><%=item.text%>!!!!</div>
			<% }else{ %>
				<div><%=item.text%></div>
			<% } %>
		<% } %>
	</script>
	<script>
		//需要遍历的对象
		var json = [{
			text:"Hello World"
		},{
			text:"Hello Template"
		},{
			text:"Hello Html"
		}];
		//加载模板
		var str = template('templateTest', { //模板的id=templateTest
			"json": json//传递的参数
		});
		document.getElementById("divText").innerHTML=str; 
	</script>
</html>