$.ajax()與vue結合獲取數據並渲染
阿新 • • 發佈:2018-05-03
zhang IT one ID ucc article ext html ajax
html:
<div id="app1"> <ul> <li v-for="item in datas"> <div href=""> <div v-text="item.time"></div> <div href="" v-for="item1 in item.list"> <div v-text="item1.type"></div> <div v-text="item1.money"></div> </div> </div> </li> </ul> </div>
JS:
var vmm=new Vue({ el: "#app1", data: { datas: [] }, mounted:function(){ this.showData(); //需要執行的方法可以在mounted中進行觸發,其獲取的數據可以賦到data中後,可以放在前面進行渲染 }, methods:{ showData:function () { jQuery.ajax({ type: ‘Get‘, url: "data-data.json", // data:{type:type,ext:ext}, datatype:"json", success: function (data) { for(var i=0;i<data.length;i++){ vmm.datas.push(data[i]); } console.log(vum.datas); } } });
data-data.json:
[ { "time":"2017-10-10", "list":[ {"type":"消費(訂單號101010101010)","money":"99.00"}, {"type":"儲值(訂單號101010101010)","money":"78.00"}, {"type":"退款(訂單號101010101010)","money":"66.00"} ] }, { "time":"2017-08-16", "list":[ {"type":"消費(訂單號101010101010)","money":"99.00"}, {"type":"儲值(訂單號101010101010)","money":"78.00"}, {"type":"退款(訂單號101010101010)","money":"66.00"} ] }, { "time":"2017-07-16", "list":[ {"type":"消費(訂單號101010101010)","money":"99.00"}, {"type":"儲值(訂單號101010101010)","money":"78.00"}, {"type":"退款(訂單號101010101010)","money":"66.00"} ] } ]
https://www.cnblogs.com/yg_zhang/p/6158612.html
https://blog.csdn.net/qq_39740187/article/details/77369749
$.ajax()與vue結合獲取數據並渲染