模版引擎的使用

最新推荐文章于 2022-05-05 18:12:17 发布

zuo_zuo_blog

最新推荐文章于 2022-05-05 18:12:17 发布

阅读量179

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/90677216

版权

Ajax 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用模版引擎
使用模版引擎方法：1.导入js文件，2.准备模版，3.准备多想填充模版设置到界面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<!-- 别人封装的考虑的内容多，功能也比较强大 -->
<!-- 使用模版引擎方法：1.导入js文件，2.准备模版，3.准备对象填充模版设置到界面 -->

<!-- 1.导入js文件 -->
<script type="text/javascript" src='../js/template-native.js'></script>

<!-- 2.准备模版 -->
<script type="text/template" id="template">
	<ul>
		<li><%=name%></li>
		<li><%=skill%></li>
		<ul>
			<%for(var i=0;i<friend.length;i++){%>
			        <li><%=friend[i]%></li>
			<%}%>
		</ul>
		<ul>
			<%for(var i=0;i<brother.length;i++){%>
			    <li>名字：<%=brother[i].name%></li>
			    <li>技能：<%=brother[i].skill%></li>
			    <li>价格：<%=brother[i].price%></li>
			<%}%>
		</ul>
	</ul>
</script>

<!-- 准备对象填充模版设置到界面 -->
<script type="text/javascript">
	//对象
	var obj={
		name:"路飞",
		skill:"橡胶机关枪",
		friend:["葫芦娃","鸣人","黑猫警长","美少女战士"],
		brother:[
		{
			name:"喜洋洋",
		    skill:"被狼爪",
		    price:"50rmb"
		},
		{
			name:"美洋洋",
		    skill:"爱吃草",
		    price:"5000rmb"
		}
		]
	}

	//调用模版引擎的方法
	var str=template('template',obj);
	console.log(str);

	//添加到界面
	document.body.innerHTML=str;
</script>

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模版引擎的使用

使用模版引擎使用模版引擎方法：1.导入js文件，2.准备模版，3.准备多想填充模版设置到界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>...
复制链接

扫一扫