arttemplate.js简洁写法案例
2024-10-01 08:37:56
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简介语法</title>
</head>
<body>
<div id="box"></div>
<!--**注意** 模版当中没有其他全局变量 -->
<!--
<% for(var i = 0 ; i < model.length ; i ++){ %>
<%=model[i].name%>今年<%=model[i].age%><br>
<% }; %>
-->
<!--
{{ each model as value i }}
{{value.name}}今年{{value.age}}<br>
{{/each}}
-->
<script type="text/template" id="box_template">
{{ each model}}
{{$index}} {{$value.name}}今年{{$value.age}}<br>
{{/each}}
</script>
<!--原生语法的js native-->
<script src="js/template.js"></script>
<script src="js/jquery.min.js"></script>
<script>
/*1.准备数据*/
var dataList = [
{name:'xgg',age:'10'},
{name:'xgg',age:'12'},
{name:'xgg',age:'13'},
{name:'xgg',age:'14'},
{name:'xgg',age:'18'}
]
/*2.转化数据成html*/
var html = template('box_template',{model:dataList});
/*3.渲染*/
document.querySelector('#box').innerHTML = html;
</script>
</body>
</html>
最新文章
- 运用DebugDiag诊断ASP.Net异常
- Linux Bash 使用$?来防止一些误删操作
- linux各种命令
- Java 7 语法新特性
- SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-007-表单验证@Valid、Error
- Eclipse选择rt.jar的源代码的位置
- 比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架
- Memcache缓存系统原理
- sharepoint 2013 个人网站公共母板页路径地址
- Java 领域从传统行业向互联网转型你必须知道的事儿
- 转://IO的基础概念
- property与x.setter与x.deleter
- C# 有哪些集合
- 【Python】利用正则解析xml练习题
- 【Android】录音-amr音频录制
- Android AES 加密、解密
- Hive学习之路 (二十)Hive 执行过程实例分析
- 24.Swap Nodes in Pairs (List; Two-Pointers)
- Your app uses or references the following non-public APIs的解决方案
- SpringBoot Mybatis keyProperty和useGeneratedKeys的作用