利用json文件模拟ajax获取数据,vue渲染数据:
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"} ] } ]