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