template-web是什么?
这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。
template-web怎么使用
1. each遍历语句的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table></table>
<!-- 1. 引入模板引擎js代码-->
<script src="./assets/lib/template-web.js"></script>
<script type="text/html" id="template">
// 使用template-web.js自带的循环语句,对数据进行遍历并渲染
{{each data}}
<tr>
<td>{{$value.name}}</td>
<td>{{$value.age}}</td>
<td>{{$value.phone}}</td>
<td>{{$value.sex}}</td>
</tr>
{{/each data}}
</script>
<script>
// 2. 准备好模板
let tb = document.querySelector('table')
let data = [{
name: 'andy',
age: 19,
phone: '111111111',
sex:'女'
},{
name: 'mary',
age: 17,
phone: '333333333',
ex:'女'
},{
name: 'mark',
age: 12,
phone: '222222222',
ex:'男'
}]
let res = template('template',{data:data}) // 可以简写 let res = template('template', data)
// 把模板放到页面中
tb.innerHTML = res
</script>
</body>
</html>
输出结果为:
2. if语句的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="ifBox"></div>
<!--引入模板引擎-->
<script type="text/javascript" src="./assets/lib/template-web.js" ></script
<script type="text/html" id="ifTemplate">
<ul>
<!-- if语句的使用 -->
{{if sex=="女"}}
<li>姓名:{{name}} 女士
<ol>
<li>下午好</li>
<li>你真{{skill}}</li>
</ol>
</li>
{{else if sex=="男"}}
<li>姓名:{{name}} 先生
<ol>
<li>下午好</li>
<li>你真{{skill}}</li>
</ol>
</li>
{{/if}}
</ul>
</script>
<script type="text/javascript">
//定义数据
var person1 = {
name:"pink德华",
sex:"男",
skill:"帅"
};
var person2 = {
name:"胡晓晓",
sex:"女",
skill:"漂亮"
};
// 利用模板引擎 引用数据填充到模板中
var result = template("ifTemplate",person1);
var result2 = template("ifTemplate",person2);
//将返回的模板结果添加到界面中
var ifBox = document.getElementById("ifBox");
ifBox.innerHTML = result + result2;
</script>
</body>
</html>
输出结果为:
版权声明：本文为weixin_52119040原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。