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