tempalte.js遍历对象

最新推荐文章于 2022-10-31 08:58:39 发布

Pima

最新推荐文章于 2022-10-31 08:58:39 发布

阅读量714

点赞数

文章标签： tempalte.js 对象

本文链接：https://blog.csdn.net/Gimamy/article/details/83721120

版权

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<script src="template.js"></script>
</head>
<body>
<div class="main">
        <div class="msgtable">
                <p class="condition">今日代付情况</p>
                <div class="itemtable">
                    <div class="today">
                        <span>今日代付</span>
                    </div>
                    <div class="list">
                        <ul class="ulList">
                            <li>交易类型</li>
                            <li>交易金额</li>
                            <li>交易数量</li>
                            <li>手续费</li>
                        </ul>
                    </div>
                </div>
            </div>
</div>

</body>

<script id="temp" type="text/html">
{{each list as item i}}
        <li>{{item.amount}}</li>
        <li>{{item.count}}</li>
        <li>{{item.pay_type}}</li>
        <li>{{item.merchant_fee}}</li>

{{/each}}
</script>


<script>

//最好是数组对象
var data={
list:[
{amount: 39, count: 1, pay_type: " 支付宝扫码", merchant_fee: 0.56},
{amount: 65, count: 10, pay_type: " H5扫码", merchant_fee: 1.56}
]
}
var html=template('temp',data);
$(".ulList").append(html);//插入div标签里
</script>
</html>