1、 模板 引擎 的步骤
1.1语法
通过{{}}进行变量的输出：三元、对象属性、数组、表达式等
点击查看代码
<!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></title>
<!-- 第一步导入template的文件 -->
<script src="./lib/template-web.js"></script>
</head>
<body>
<div id="tem-html"></div>
<script type="text/html" id="tem-list">
<!--2、 定义一个模板 -->
<!-- {{}}是template语法 可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。 -->
<h3>{{name}} ------ {{age}}</h3>
<!-- 原文输出 -->
{{@text}}
<div>
{{if flag === 0 }}
这是if按需输出
{{/if}}
{{if flag === 1 }}
这是if按需输出
{{else if flag ===0}}
这是else按需输出
{{/if}}
</div>
<ul>
{{each hobby}}
<ul>
<h4>这是循环输出语法：</h4>
索引：{{$index}} 数值： {{$value}}
</ul>
{{/each}}
</ul>
<div>
{{time | funtime}}
</div>
</script>
<script type="text/javascript">
//6、定义一个过滤器 根据语法 template.defaults.imports.filterName = function(value){/*return处理的结果*/}
template.defaults.imports.funtime = function(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate();
return y + '-' + m + '-' + d // 注意，过滤器最后一定要 return 一个值
}
//3、渲染数据
var data = { name : 'yyds' , age : 24,text:'<h3>这是原文输出;加一个@</h3>',flag:0,hobby:['吃饭','睡觉','写代码'],time:new Date() }
//4、调用template函数 获取模板id 渲染data数据
var htmlstr =template('tem-list',data);
console.log(htmlstr);
//5、渲染html结构
document.getElementById('tem-html').innerHTML=htmlstr;
</script>
</body>
</html>