使用template.js模板引擎动态渲染页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用template.js模板引擎动态渲染页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/template-web.js/1.2.7/template-web.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!--定义模板-->
<!--将代码按照js语法进行解析-->
<!--需要手动的更改为text/html 按照html语法解析-->
<script type="text/html" id="tpl-user">
<h1>{{name}}--{{age}}</h1>
{{@test}}
<pre><code> <!--条件输出-->
<div>
{{if flag %2==0}}
{{flag}}是偶数
{{else if flag%2==1}}
{{flag}}是奇数
{{/if}}
</div>
<!--循环输出-->
<ul>
{{each hobby}}
<li>索引是{{$index}},循环项是{{$value}}</li>
{{/each}}
</ul>
<h3>使用过滤器:{{regTime | dateFormat}}</h3>
</script>
<script>
//过滤器函数
template.defaults.imports.dateFormat=function(date){
var y=date.getFullYear()
var m=date.getMonth()+1
var d=date.getDate()
return y+'-'+m+'-'+d
}
//定义数据
var data={
name:'zjy',
age:20,
test:'<em>测试原文输出</em>',
flag:9,
hobby:['看书','学习','敲代码']
}
//调用template函数
var htmlStr= template('tpl-user',data)
console.log(htmlStr)
$("#container").html(htmlStr)
//渲染html结构
</script>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/nSvr 著作权归作者所有。请勿转载和采集!