<!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. 微信小程序 请求超时处理

    1.在app.json加入一句 "networkTimeout": { "request": 10000 } 设置超时时间,单位毫秒 2.请求 wx.reque ...

  2. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  3. 想要远程服务器长时间挂机不断开ssh连接的技巧

    使用top命令挂着就好了,top命令执行的“查看系统进程和资源占用”的任务会一直输出动态的数据,一直有数据传输就不会因为长时间挂机而断开ssh链接了,尤其针对于海外服务器,因为高延迟经常出现挂机久了自 ...

  4. js-2018-11-09 关于Array中的srot()方法和compare()方法

    Array中的srot()方法 sort()方法是用来重排序的方法.在默认情况下,sort()方法按升序排列数组项----即最小的值位于最前面,最大的值排在最后面. 我们看看官方是怎么说的: arra ...

  5. CSS 利用transform达到居中效果

    <body> <div class="center"> .... </div> </body> 让left和top都是50%,这在水 ...

  6. echarts常用实例

    1.柱状图: 1.需要动态加载的参数是x轴以及柱状图的数值,legendData和seriesData.demo使用是可以直接写死参数,在执行this.initChart()方法即可.具体代码可以参数 ...

  7. 3.IDEA+Maven+Spring注解+Servlet+MyBatis

    1.创建项目模块 2. 选择创建的项目类型,maven的web项目 3.输入项目名 4.选择自己配置的本地maven库 5.创建项目 6.查看项目结构 7.配置项目的依赖pom.xml <?xm ...

  8. 2.1 SVN的安装

     一.SVN客户端安装 运行TortoiseSVN-1.6.6.17493-win32-svn-1.6.6.msi程序, 开始安装 点击Next, 下一步 选择 I accept 接受, 点击Next ...

  9. cxGrid主从表删除从表记录的困惑

    cxgrid主从表显示方便直观. varADetailDC: TcxGridDataController;AView: TcxCustomGridTableView; with cxgrdbndtbl ...

  10. lucene_09_solrj的使用

    什么是solrj solrj 是访问Solr 服务的java客户端,提供索引(增删改)和搜索(查)的请求方法,Solrj 通常在嵌入在业务系统中,通过Solrj的API接口操作Solr服务,如下图: ...