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 (); The method that needs to be executed can be triggered in the mounted, the obtained data can be placed in the previous rendering }, 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": "Consumption (order number 101010101010)", "Money": "99.00"}, {"type": "Stored value (order number 101010101010)", "Money": "78.00"}, {"type": "Refund (order number 101010101010)," "" "", "" 66.00 "} ] }, { "Time": "2017-08-16", "list": [ {"type": "Consumption (order number 101010101010)", "Money": "99.00"}, {"type": " Stored value (Order number 101010101010) "," Money ":" 78.00 "}, {" type ":" Refund (order number 101010101010) "," "" "," "66.00"} ] }, { "time": "2017-07-16", "list": [ {"type": "Consumption (order number 101010101010)", "Money": "99.00"}, {" Type ":" Stored value (order number 101010101010) "," Money ":" 78.00 "}, {" type ":" Refund (order number 101010101010) "," "", "" 66.00 "} ] }]
Https://www.cnblogs.com/yg_zhang/p/6158612.html
77369749
$.ajax () combine with Vue to get data and render