<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
</body>
</html>
<!-- 导入模板引擎 -->
<script src="./js/template-web.js"></script>
<!-- 逻辑语句 条件 -->
<script id='ifTemplate' type="text/html">
<ul>
{{if male=='女'}}
<li>欢迎您 {{name}} 女士
<ol>
<li>这是最新款的包包</li>
<li>这是最新款的口红</li>
<li>没想到,你竟然是{{skill}}</li>
</ol>
</li>
{{else if male=='男'}}
<li>欢迎您 {{name}} 先生
<ol>
<li>这是最新款的拖拉机</li>
<li>讨厌,才来找人家</li>
<li>没想到,你竟然稍长{{skill}}</li>
</ol>
</li>
{{/if}}
</ul>
</script>
<script>
var person1 = {
male: '女',
name: '郑爽',
skill: '身材好'
};
var person2 = {
male: '男',
name: '张翰',
skill: '这篇鱼塘我承包了'
};
console.log(template('ifTemplate', person1));
console.log(template('ifTemplate', person2));
</script>
<!-- 原文输出 -->
<script id='norTemplate' type="text/html">
<ul>
<li>{{name}}</li>
<li>{{skill}}</li>
<li>{{@info}}</li>
</ul>
</script>
<script>
var person = {
name:'犬夜叉',
skill:'变犬',
info:'<a href="https://baike.baidu.com/item/%E7%8A%AC%E5%A4%9C%E5%8F%89/26878?fr=aladdin">犬夜叉</a>'
}
document.body.innerHTML = template('norTemplate',person);
</script>
<!-- 循环语句 -->
<script id='eachTemplate' type="text/html">
<ul>
<li>{{name}}</li>
<li>兄弟们
{{each brother}}
<li>{{$value}}</li>
{{/each}}
</li>
<li>家人们
<ol>
{{each family}}
<li>{{$value.name}}---{{$value.skill}}</li>
{{/each}}
</ol>
</li>
</ul>
</script>
<script>
var person = {
name:'大娃',
brother:[
'二娃',
'三娃',
'水娃',
'火娃',
'千里眼娃',
'瓜娃子'
],
family:[
{name:'爷爷',skill:'被抓'},
{name:'穿山甲',skill:'到底说了什么'},
{name:'小蝴蝶',skill:'撩--葫芦娃'}
]
}
console.log(template('eachTemplate',person));
</script>
浙公网安备 33010602011771号