art-template补充
2024-10-07 14:11:57
<!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>
最新文章
- Java集合框架
- 集锦.txt
- 欧拉工程第67题：Maximum path sum II
- winform托盘时，要运行一个实例，解决办法
- IIS Express中如何配置支持json
- Android开发之布局--RelativeLayout布局
- Blockly编程：用Scratch制作游戏愤怒的小牛（小鸟）
- Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
- Prometheus : 入门
- Spring MVC新手教程（二）
- Codeforces Round #466 (Div. 2)
- 【IT小常识】如何将IE手动升级或降级
- OpenResty api网关设计
- Learning Spread-out Local Feature Descriptors
- sleep和Sleep区别
- Redis简介+常用命令
- 算法 -- 四种方法获取的最长“回文串”，并对时间复杂进行分析对比&PHP
- 【刷题】BZOJ 2095 [Poi2010]Bridges
- 河南省第七届ACM程序设计大赛总结
- 城联数据TSM技术方案起底