模版引擎的使用

使用模版引擎
使用模版引擎方法: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>

猜你喜欢

转载自blog.csdn.net/zuo_zuo_blog/article/details/90677216
今日推荐