arttemplate.js原生写法案例
<!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原生写法案例的更多相关文章
- arttemplate.js简洁写法案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS原生示例 案例 学习
写在前面 原生JS是原理,框架是迎合业务需求的重要关键工具 本文是整理工作及学习中理解的基础和难点,便于多方位理解功能模块整合和使用 不定期更新 行文仓促,文中有错误在所难免,欢迎诸位指正 trans ...
- 放大镜功能 JS原生写法
********** 希望对大家帮助 我会继续努力的 如果有不对的地方请大家帮忙指出****** 1 [JS 代码] <script> var oBox = document.getEle ...
- screen,client,page三种确定鼠标坐标的区别和原生JS事件写法,区别于Jquery的$.on(x,y);和$.click()
screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...
- Art-Template模板引擎(原生写法与简洁写法)
模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事 • native原生语法 1. 准备数据 2. 把数据转化成html格式的字符串 使用模板引擎 artT ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——两种方法实现性别的判定
template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...
- 15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
随机推荐
- Git创建本地分支并关联远程分支(二)
创建本地分支git branch 分支名 例如:git branch dev,这条命令是基于当前分支创建的本地分支,假设当前分支是master(远程分支),则是基于master分支创建的本地分支dev ...
- scrapy-redis让redis不止使用db0
废话不多说,直接在 custom_settings 设置即可 代码: class MySpider(RedisSpider): """Spider that reads ...
- 设置快捷键用sublime直接打开浏览器
1.安装sidebarenhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements 2.配置预览快捷键 / ...
- Coloring Flame Graphs: Code Hues
转自:http://www.brendangregg.com/blog/2017-07-30/coloring-flamegraphs-code-type.html I recently improv ...
- 类的定义与实例化、构造函数和初始化表(day04)
十三 类的定义与实例化 类的一般形式 class/struct 类名:继承表{ 访问控制限定符: 类名(形参表):初始化表{}//构造函数 ~类名(void){}//析构函数 返回类型 函数名(形参表 ...
- 51nod1185 威佐夫游戏 V2【博弈论】
有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数量的石子,但不可不取.拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出2堆石子的数量, ...
- CentOS 7 x64下Apache+MySQL(Mariadb)+PHP5.6的安装
每次搭建新服务器,都要来来回回把这些包再装一下,来来回回搞了不下20遍了吧,原来都是凭经验,配置过程中重复入坑是难免的,故写此文做个备忘.虽然有像xampp这样的集成包,但是在生产环境的Linux发行 ...
- PHP学习总结(12)——PHP入门篇之变量
一.什么是变量 变量是用于存储值的,我们命令服务器去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用.我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果.榴莲(当然也可以用来装玫瑰 ...
- fzu 2132
#include<stdio.h> double h; double tt; void s(long long m,long long n) { long long i,j,sum; j= ...
- Spring MVC-表单(Form)处理示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_form_handling.htm 说明:示例基于Spring MVC 4.1.6 ...