<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div class="box"></div>

<script type="text/template" id="xjj">

    <ul>

        <% for(var i = 0 ; i < list.length ; i ++){%>

        <li>我的名字是：<b><%=list[i].name%></b>我的年龄是：<b><%=list[i].age%></b>。</li>

        <%};%>

    </ul>

</script>

<script src="js/template-native.js"></script>

<script>

    /*准备数据*/

    var data = {

        list:[

            {name:'xjj1',age:10},

            {name:'xjj2',age:12},

            {name:'xjj3',age:16},

            {name:'xjj4',age:40}

        ]

    }

    /*解析数据成html  {model:''}*/

    var html = template('xjj',data);

    document.querySelector('.box').innerHTML = html;

</script>

</body>

</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. 5G vs AI谁更有前途？

    5G vs AI谁更有前途? 5G通信技术和AI人工智能技术是两个不同层面的技术领域,而它们两者都将在未来20年内对世界的发展有着革命性和里程碑式的影响.未来5G和AI谁更有前途呢? 5G技术的发展和 ...

  2. IDEA中使用Database管理工具

    以下内容来自我的知乎回答IntelliJ IDEA中有什么让你相见恨晚的技巧? 说个冷门的,用IDEA操作数据库. 可能大部分不知道,IDEA是自带数据库管理工具的,类似于一个小型Navicat. 具 ...

  3. nyoj24-素数 距离问题

    素数距离问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 现在给出你一些数,要求你写出一个程序,输出这些整数相邻最近的素数,并输出其相距长度.如果左右有等距离长度素数 ...

  4. Ubuntu18.04 安装后应该做的事!!!

    一.WPS 进入WPS_Linux官网,下载对应的deb文件. WPS有官方的文件说明可供查看,WPS社区 WPS 的依赖关系,部分数学公式显示支持,都可以通过WPS社区查看 安装wps sudo d ...

  5. 爬虫系列(十三) 用selenium爬取京东商品

    这篇文章,我们将通过 selenium 模拟用户使用浏览器的行为,爬取京东商品信息,还是先放上最终的效果图: 1.网页分析 (1)初步分析 原本博主打算写一个能够爬取所有商品信息的爬虫,可是在分析过程 ...

  6. C#--线程存储数据的机制

    面试题:线程存储数据的机制 Local variables 局部变量 临时存储 栈 Instance class fields 对象存储 堆 (堆的大小只有硬件的限制) Static local va ...

  7. windows上开启winrm服务

    原文链接 因为进行远程powershell管理必须需要启用winrm的服务,所以需要在windows平台上启用winrm服务 winrm service 默认都是未启用的状态,先查看状态:如无返回信息 ...

  8. 洛谷——P2038 无线网络发射器选址

    https://www.luogu.org/problem/show?pid=2038 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城 ...

  9. LINUX内核内存屏障

    =================                          LINUX内核内存屏障                          ================= By ...

  10. caffe中的前向传播和反向传播

    caffe中的网络结构是一层连着一层的,在相邻的两层中,可以认为前一层的输出就是后一层的输入,可以等效成如下的模型 可以认为输出top中的每个元素都是输出bottom中所有元素的函数.如果两个神经元之 ...