前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

artTemplate模板引擎之偶数奇数解析

如果有一个数组,我们只取其中的偶数或奇数该如何取值呢,下面一组数据是我们通过接口拿到的,其实我们只要奇数的一部分,1,3,5,7…等,如图:

\["1701班",11,0,"0%",0,"0%",0,"0%",1,"9.09%",7,"63.64%",2,"18.18%",0,"0%",0,"0%",0,"0%",1,"9.09%"\]

!\[](http://www.w3cbest.com/wp-content/uploads/2018/09/20180926133157.jpg) 我们只要一个if条件判断就可以了,操作如下: js

res = {"data":{
  "head":\["人数","比例"\],
  "datas":\[
  {"data":\["1701班",11,0,"0%",0,"0%",0,"0%",1,"9.09%",7,"63.64%",2,"18.18%",0,"0%",0,"0%",0,"0%",1,"9.09%"\]},
  {"data":\["班级平均",21,"0","0%","0","0%","0","0%","3","28.57%","5","47.62%","1.5","14.29%","0","0%","0","0%","0.5","4.76%","0.5","4.76%"\]},
  {"data":\["全年级",21,0,"0%",0,"0%",0,"0%",6,"28.57%",10,"47.62%",3,"14.29%",0,"0%",0,"0%",1,"4.76%",1,"4.76%"\]}
  \],
  "title":\["90以下","90 ~ 97","97 ~ 104","104 ~ 111","111 ~ 118","118 ~ 125","125 ~ 132","132 ~ 139","139 ~ 146","146以上"\]
  }
}
document.getElementById('id').innerHTML = template('tpl', res);

template

<script id="tpl" type="text/html">
  <thead>
    <tr>
      <th>班级</th>
      {{each title value i}}
      <th>{{value}}</th>
      {{/each}}
    </tr>
</thead>
<tbody>
  {{each datas item}}
  <tr>
    {{each item.data value i}}
    {{if (i % 2 == 0)}}
    <td>{{value}}</td>
    {{/if}}
    {{/each}}
  </tr>
  {{/each}}
</tbody>
</script>

其实很简单,就跟跟平时普通的if判断一样,都是取模,但是要注意在这里面要有始有终,有{{if}}就得有对应的{{/if}},有{{each}}就得有对应的{{/each}}

坚持技术创作分享,您的支持将鼓励我继续创作!