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结合获取数据并渲染
原文地址:https://www.cnblogs.com/agansj/p/8983021.html