tempalte.js遍歷物件
阿新 • • 發佈：2018-12-19
<!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>