art-template使用

1. 渲染单个对象数据

  1. 回调函数中设置渲染对象

const stionStr = template("script的id", {list: ele});
$(".info").html(stionStr);

  2. 在script中定义模板

<script type="text/html" id="topboxInfo" >
        <h6 class="title">{{ list.name}}</h6>
        <div class="fz">直流桩:6    直流桩:6</div>
        <div class="sm">
            <span class="kx"><em>空闲:</em><i>{{ list.stat.idle }}</i><i>/</i>{{list.stat.total}}</span>
            <span class="kx fr"><em>故障:</em><i>0</i></span>
        </div>
        <div class="box">
            <li class="address">{{list.address}}</li>
            <li class="tel">0571-88668630</li>
            <li class="time">周一至周日 24:00-00:00</li>
        </div>   
    </script>

2. 遍历数组

  

const htmlStrT = template("botboxList", {list : res.chargers});
$(".botbox .list").html(htmlStrT);

  

{{ each list curr index }}
        <li>
            <h6 class="title">{{curr.name}}</h6>
            <div class="fz">地址:{{curr.address}}</div>
        </li>
{{ /each }}

  

转载于:https://www.cnblogs.com/xhrr/p/11224040.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值