简单使⽤template-web.js 步骤:
1.导⼊template-web.js(可以在上边的官⽹⾥边进⾏下载)
2.制作模板
3.添加模板数据
4.模板添加到HTML中
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
width: 100px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<a></a>
<a></a>
<a></a>
<a></a>
<button onclick="test01()">普通模板</button>
<br />
<br />
<br />
<button onclick="test02()">判断模板</button>
<br />
<br />
<br />
<button onclick="test03()">html模板</button>
<br />
<br />
<br />
<button onclick="test04()">循环模板</button>
<br /><br /><br />
<table border="0"cellspacing="0"cellpadding="0">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<!--
作者：lichenfei
时间：2018-12-05
时间：2018-12-05
描述：引⼊模板引擎js
-
->
<script type="text/javascript"src="js/jquery-2.2.4.min.js"></script> <script type="text/javascript"src="js/template-web.js"></script>
<!--
作者：lichenfei
时间：2018-12-05
描述：制作模板1，普通模板
-->
<script id="test01"type="text/html">
<tr>
<td>{{value1}}</td>
<td>{{value2}}</td>
<td>{{value3}}</td>
</tr>
</script>
<!--
作者：lichenfei
时间：2018-12-05
描述：制作模板2 if判断模板
-->
<script id="test02"type="text/html">
<tr>
<td>{{value1}}</td>
<td>{{value2}}</td>
{{if value3=="测试内容"}}
<td>{{value3}}</td>{{/if}}
</tr>
</script>
<!--
作者：lichenfei
时间：2018-12-05
描述：制作html模板
-->
<script id="test03"type="text/html">
<tr>
<td>{{@value}}</td>
<td>{{@value}}</td>
<td>{{@value}}</td>
</tr>
</script>
jquery官方文档下载<!--
作者：lichenfei
时间：2018-12-05
描述：制作循环模板
-->
<script id="test04"type="text/html">
{{each list}}
<tr>
<td>{{$value.name}}</td>
<td>{{$value.age}}</td>
<td>{{$value.sex}}</td>
</tr>
{{/each}}
</script>
<script>
/******************************************************************************/ function test01(){
var str ="3";
str = str =="1"?"我是1": str =="2"?"我是2":"我是3";
console.log(str);
var data1 ={//<<<<；添加标签可以使⽤{{@字段}}
value:'<span >hello world!</span>'
};
var data2 ={//⼀般情况下使⽤
value1:"测试内容1",
value2:"测试内容2",
value3:"测试内容3"
};
for(var i =0; i <10; i++){//添加10条信息
for(var i =0; i <10; i++){//添加10条信息
var html =template("test01", data2);//添加模板数据
//模板添加到页⾯
$("tbody").append(html);
}
}
/******************************************************************************/
function test02(){
$("tbody").html("");
var data2 ={
value1:"测试内容1",
value2:"测试内容2",
value3:"测试内容3"
};
for(var i =0; i <10; i++){
var html =template("test02", data2);
$("tbody").append(html);
}
}
/******************************************************************************/
function test03(){
$("tbody").html("");
var data3 ={
value:"<a href='www.baidu'>百度</a>"
};
var html =template("test03", data3);
$("tbody").append(html);
}
/******************************************************************************/
function test04(){
$("tbody").html("");
var data ={
list:[{
name:"lcf1",
age:"18",
sex:"男"
},{
name:"lcf2",
age:"13",
sex:"⼥"
},{
name:"lcf3",
age:"24",
sex:"⼥"
},{
name:"lcf4",
age:"32",
sex:"男"
},{
name:"lcf5",
age:"32",
sex:"⼥"
}],
num:5
};
var html =template("test04", data);
$("tbody").append(html);
}
</script>
</html>
基础操作到这⾥就完了，详细请参考官⽅⽂档!
语法:
art-template ⽀持标准语法与原始语法。标准语法可以让模板易读写，⽽原始语法拥有强⼤的逻辑表达能⼒。
标准语法⽀持基本模板语法以及基本 JavaScript 表达式；原始语法⽀持任意 JavaScript 语句，这和 EJS ⼀样。在这⾥只讨论标准语法，不讨论元素语法.
基础语法:
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
模板⼀级特殊变量可以使⽤ $data 加下标的⽅式访问：{{$data['user list']}}
原⽂输出:
{{@ value }}
条件:
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
循环:
{{each target}}
{{$index}} {{$value}}
{{/each}}
变量:
{{set temp = t}}
更多语法请参考官⽅⽂档.
新⼈⼀枚，有问题希望多多指导.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。