APICloud学习笔记之doT模板

最新推荐文章于 2019-12-10 10:53:28 发布

转载最新推荐文章于 2019-12-10 10:53:28 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuhailong/p/6595793.html

本文介绍了一种基于文本模板的渲染方式，展示了如何通过条件语句和循环语句来动态生成HTML内容。具体包括根据不同条件显示不同样式的商品卡片，并且能够通过循环遍历商品列表来动态填充商品信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <script type="text/template" id="template">
 2     {{~it:value:index}} {{?0 == value.showType}}
 3     <div class="ware ware-0">
 4         <div class="content" tapmode onclick="fnOpenWareWin('{{=value.id}}');">
 5             <img onload="fnLoadImage(this)" data-url="{{=value.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">
 6             <div class="info">
 7                 <span class="price">{{=value.price}}</span>
 8                 <span class="unit">/{{=value.unit}}</span>
 9                 <span class="origin-price">&nbsp;超市:<del>{{=value.originPrice}}元</del></span>
10             </div>
11             <div class="control">
12                 <div class="panel">
13                     <img class="minus" src="../image/minus.png">
14                     <div class="count">0</div>
15                 </div>
16                 <img class="add" src="../image/add.png">
17             </div>
18         </div>
19     </div>
20     {{??}}
21     <div class="ware ware-1">
22         <div class="content" tapmode onclick="fnOpenWareWin('{{=value.id}}');">
23             <img onload="fnLoadImage(this)" data-url="{{=value.thumbnail.url}}" class="thumbnail" src="../image/default_square.png">
24             <div class="info">
25                 <div class="name">{{=value.name}}</div>
26                 <div class="description">{{=value.description}}</div>
27                 <div class="price-tag">
28                     <span class="price">￥{{=value.price}}</span>
29                     <span class="unit">/{{=value.unit}}</span>
30                 </div>
31                 <div class="origin-price">超市:
32                     <del>{{=value.originPrice}}元</del>
33                 </div>
34             </div>
35             <div class="control">
36                 <div class="panel">
37                     <img class="minus" src="../image/minus.png">
38                     <div class="count">0</div>
39                 </div>
40                 <img class="add" src="../image/add.png ">
41             </div>
42         </div>
43     </div>
44     {{?}} {{~}}
45 </script>

{{?...}} if语句

{{？}}if结束

{{~it:value:index}}for语句

{{~}}for结束

转载于:https://www.cnblogs.com/wuhailong/p/6595793.html