art-template小demo

最新推荐文章于 2022-02-28 14:49:32 发布

迷途明

最新推荐文章于 2022-02-28 14:49:32 发布

阅读量596

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_41905935/article/details/80531916

版权

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
  <!-- 1引入art-template的js文件 --> 
 
  < 
  script 
  src= 
  "./template-web.js" 
  > 
  < 
  / 
  script 
  > 
 
  <!-- 2开始编译模板 --> 
 
  < 
  script 
  type= 
  "text/tmpl" 
  id= 
  "tmpl" 
  > 
 
   <% for(var i=0;i<arr.length;i++){%> 
 
   <tr> 
 
   <td> 
 
   <%= arr[i].id%> 
 
   </td> 
 
   <td> 
 
   <%= arr[i].name%> 
 
   </td> 
 
   <td> 
 
   <%= arr[i].age%> 
 
   </td> 
 
   </tr> 
 
   <% } %> 
 
  </ 
  script 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  table 
  > 
 
  < 
  thead 
  > 
 
  < 
  tr 
  > 
 
  < 
  th 
  >id 
  </ 
  th 
  > 
 
  < 
  th 
  >name 
  </ 
  th 
  > 
 
  < 
  th 
  >age 
  </ 
  th 
  > 
 
  </ 
  tr 
  > 
 
  </ 
  thead 
  > 
 
  < 
  tbody 
  id= 
  "tbody" 
  ></ 
  tbody 
  > 
 
  </ 
  table 
  > 
 
  </ 
  body 
  > 
 
  < 
  script 
  > 
 
  // // 3.自定义的数组 
 
  var 
  arr = [{ 
 
  "id" 
  : 
  1, 
 
  "name" 
  : 
  "小红", 
 
  "age" 
  : 
  10 
 
   }, { 
 
  "id" 
  : 
  2, 
 
  "name" 
  : 
  "小刚", 
 
  "age" 
  : 
  11 
 
   }, ]; 
 
  // // 4 传入数据之后模板会自动遍历 
 
  var 
 
  str = 
  template( 
  "tmpl", { 
 
  arr: 
  arr 
 
   }); 
 
  // "tmpl"是编译模板是对应的id；{arr:arr}放的是对象 // 5获取tbody这个元素，然后利用DOM中的innerHTML获取str变量里面的内容 
 
  document. 
  getElementById( 
  "tbody"). 
  innerHTML = 
  str; 
 
  // 3-5放在最后是因为如果放在<table>之前的话tbody还没有加载，会出现报错； 
 
  // 如果不想放在table后面，还可以使用window.οnlοad=function(){3-5步骤放在里面} 
 
  // <!--  
 
  // window.οnlοad=function(){ 
 
  // // 3.自定义的数组 var arr = [{ "id": 1, "name": "小红", "age": 10 }, { "id": 2, "name": "小刚", "age": 11 }, ]; // 4传入数据之后模板会自动遍历 var 
 
  // str = template("tmpl", { arr: arr }); // "tmpl"是编译模板是对应的id；{arr:arr}放的是对象 // 5获取tbody这个元素，然后利用DOM中的innerHTML获取str变量里面的内容 
 
  // document.getElementById("tbody").innerHTML = str;} 
 
  < 
  / 
  script 
  > 
 
  </ 
  html 
  >