template模板引擎的简单例子

最新推荐文章于 2024-04-21 09:54:21 发布

邱家少爷

最新推荐文章于 2024-04-21 09:54:21 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39047764/article/details/81393534

本文介绍了一个使用模板引擎渲染HTML页面的具体实例。通过定义一个简单的HTML结构，并利用JavaScript模板引擎将数据动态填充到HTML中，展示了如何实现数据与视图的分离。示例包括基本的数据绑定、循环遍历数组及对象等常见操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="template这个版本是可以用的.js"></script>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/html" id="tpl">
	<h1>{{title}}</h1>
	<ul>
		{{each arr as value index}}
		<li>{{value}}---->{{index}}</li>
		{{/each}}
	</ul>
	<ul>
		{{each json as value item}}
		<li>{{value}}---->{{item}}</li>
		{{/each}}
	</ul>
</script>
<script>
	var data={
		title:"hello world",
		arr:["apple","pear","orange"],
		json:{
			a:1,b:2,c:3
		}
	};
	window.onload=function(){
		var  oBox=document.getElementById('box')
		var sHTML=template("tpl",data)
		oBox.innerHTML=sHTML
	}
</script>
</html>