artTemplate基本使用方法——简单的例子

最新推荐文章于 2024-04-17 17:54:41 发布

置顶 Angel cindy

最新推荐文章于 2024-04-17 17:54:41 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_42564187/article/details/82352280

版权

一、构建模板页

注意：

1.必须给script标签添加id，type属性为text/html，否则浏览器渲染不出来。

<script id="test" type="text/html">
	<h1><%=title%></h1>
	<ul>
		<%for(var i=0;i<list.length;i++){ %>
		
		<li><%=i+1%>:<%=list[i]%></li>

	<%}%>

		
	</ul>
	
</script>

二、进行模板替换

<script>
	var data={
		title:"基本例子",
		list: ['北京', '广州', '深圳', '湛江', '阳江', '成都', '珠海']
	}
	var html=template('test',data);
	document.querySelector("#content").innerHTML=html;
</script>

三、完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="content"></div>
</body>
<script id="test" type="text/html">
	<h1><%=title%></h1>
	<ul>
		<%for(var i=0;i<list.length;i++){ %>
		
		<li><%=i+1%>:<%=list[i]%></li>

	<%}%>

		
	</ul>
	
</script>
<script src="js/template-native.js"></script>
<script>
	var data={
		title:"基本例子",
		list: ['北京', '广州', '深圳', '湛江', '阳江', '成都', '珠海']
	}
	var html=template('test',data);
	document.querySelector("#content").innerHTML=html;
</script>
</html>

四、效果图

Angel cindy

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
artTemplate基本使用方法——简单的例子

一、构建模板页注意：1.必须给script标签添加id，type属性为text/html，否则浏览器渲染不出来。&lt;script id="test" type="text/html"&gt; &lt;h1&gt;&lt;%=title%&gt;&lt;/h1&gt; &lt;ul&gt; &lt;%for(var i=0;i&lt;list.le
复制链接

扫一扫

artTemplate基本使用方法——简单的例子

“相关推荐”对你有帮助么？