1，自定義數據

//發送請求$.ajax({type: "GET", dataType:'json',url: "http://merchant.shys-suda.com/merchant/order/order_detail?order_id="+order_id, success: function (res) { var data =JSON.parse(res);console.log(data);//1獲取數據var getTpl = demo.innerHTML //調用模板，用數據填充模板,view = document.getElementById('view');laytpl(getTpl).render(data, function(html){view.innerHTML = html;});}}); <script id="demo" type="text/html">//3、創建模板{{# if(d.status){ }}order ID 不存在{{ } }}<div ><div class="row"><div class="welcome-left-container col-lg-9"><!--服務器信息--><div class="server-panel panel panel-default"><div class="panel-header">基本信息</div><div class="panel-body clearfix"><div class="col-md-2"><p class="title">訂單號</p><span class="info">{{d.response.order_id}}</span></div><div class="col-md-2"><p class="title">商戶號</p><span class="info">{{d.response.merchant_id}}</span></div><div class="col-md-2"><p class="title">終端號</p><span class="info">{{d.response.terminal_id}}</span></div><div class="col-md-2"><p class="title"> 訂單金額</p><span class="info">{{d.response.total_amount}}</span></div><div class="col-md-2"><p class="title">收款金額</p><span class="info">{{d.response.real_amount}}</span></div><div class="col-md-2"><p class="title">費率</p><span class="info">{{d.response.service}}</span></div><!-----><div class="col-md-2"><p class="title">支付狀態</p><span class="info">{{# if(d.response.pay_status ==1 ){ }}<span style="color:#3366">支付中</span>{{# }else if(d.response.pay_status ==2){ }}<span style="color:green">支付成功</span>{{# }else if(d.response.pay_status ==3){ }}<span style="color:red">支付失敗</span>{{# } }}</span></div><div class="col-md-2"><p class="title">支付通道</p><span class="info">{{# if(d.response.channels ==1 ){ }}官方{{# } }}</span></div> <div class="col-md-2"><p class="title">支付方式</p><span class="info">{{# if(d.response.pay_type ==1 ){ }}條碼{{# }else if(d.response.pay_type ==2){ }}掃碼{{# } }}</span></div><div class="col-md-2"><p class="title">支付渠道</p><span class="info">{{# if(d.response.pay_ment ==1 ){ }}支付寶{{# }else if(d.response.pay_ment ==2){ }}微信{{# } }}</span></div><div class="col-md-2"><p class="title">商戶名稱</p><span class="info">{{# if(d.response.merchant_name =='' ){ }}無{{# }else{ }}{{d.response.merchant_name}}{{# } }}</span></div><div class="col-md-2"><p class="title">終端名稱</p><span class="info">{{# if(d.response.terminal_name =='' ){ }}無{{# }else{ }}{{d.response.terminal_name}}{{# } }}</span></div></div></div></div></div></div></script>

?

<div id="view"></div>

?

總結

以上是生活随笔為你收集整理的layui模板引擎的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。