1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div class="box"></div>
  9. <script type="text/template" id="xjj">
  10.     <ul>
  11.         <% for(var i = 0 ; i < list.length ; i ++){%>
  12.  
  13.         <li>我的名字是：<b><%=list[i].name%></b>我的年龄是：<b><%=list[i].age%></b>。</li>
  14.  
  15.         <%};%>
  16.     </ul>
  17. </script>
  18. <script src="js/template-native.js"></script>
  19. <script>
  20.     /*准备数据*/
  21.     var data = {
  22.         list:[
  23.             {name:'xjj1',age:10},
  24.             {name:'xjj2',age:12},
  25.             {name:'xjj3',age:16},
  26.             {name:'xjj4',age:40}
  27.         ]
  28.     }
  29.     /*解析数据成html  {model:''}*/
  30.     var html = template('xjj',data);
  31.  
  32.     document.querySelector('.box').innerHTML = html;
  33.  
  34. </script>
  35. </body>
  36. </html>

arttemplate.js原生写法案例的更多相关文章

  1. arttemplate.js简洁写法案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. JS原生示例 案例 学习

    写在前面 原生JS是原理,框架是迎合业务需求的重要关键工具 本文是整理工作及学习中理解的基础和难点,便于多方位理解功能模块整合和使用 不定期更新 行文仓促,文中有错误在所难免,欢迎诸位指正 trans ...

  3. 放大镜功能 JS原生写法

    ********** 希望对大家帮助 我会继续努力的 如果有不对的地方请大家帮忙指出****** 1 [JS 代码] <script> var oBox = document.getEle ...

  4. screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()

    screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...

  5. Art-Template模板引擎（原生写法与简洁写法）

    模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事     • native原生语法     1. 准备数据     2. 把数据转化成html格式的字符串 使用模板引擎 artT ...

  6. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  7. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

  8. JavaScript模板引擎artTemplate.js——两种方法实现性别的判定

    template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...

  9. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

随机推荐

  1. opencv(一）下载安装

    1.visual studio 工具---Nugget包管理器---管理解决方案的Nugget程序包 搜索opencv,点击安装 下载地址: 1.http://opencv.org/ 2.https: ...

  2. 微信小程序获取登录手机号

    小程序获取登录用户手机号. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发. 首先,放置一个 button 按钮,将 ...

  3. win7下qt+opencv的环境配置

    博客http://blog.csdn.net/qiurisuixiang/article/details/8665278已经完整地介绍了整个环境配置.需要一步不差按原执行.需要说明的是,几个path的 ...

  4. Number Puzzle

    Number Puzzle Time Limit: 2 Seconds      Memory Limit: 65536 KB Given a list of integers (A1, A2, .. ...

  5. MySQL主要命令（4）

    显示数据, 给列区别名: select coL_name as 别名     from table_name;

  6. poj 1523 求割点把一个图分成几个联通部分

    #include<stdio.h> #include<string.h> #define N 1100 struct node { int u,v,next; }bian[N* ...

  7. eclipse重置页面恢复到最初布局状态

    eclipse重置页面恢复到最初布局状态 window->perspective->reset perspective

  8. hdu5355 思维+爆搜

    pid=5355">http://acm.hdu.edu.cn/showproblem.php?pid=5355 Problem Description There are m sod ...

  9. Linux Terminal fortune

    Linux下,我们能够使用apt-get安装fortune,这是一个比較有趣的功能 在输入fortune之后,Terminal会输出一句名言.诗句,或一些有趣的话: 默认情况下.fortune仅仅会显 ...

  10. linux下Oracle11g RAC搭建（七）

    linux下Oracle11g RAC搭建(七) 六.安装Grid 启动GRID安装界面 方式一:redhat下调整分辨率 [root@node1 ~]# xhost +       //授权 [ro ...