$.ajax()与vue结合获取数据并渲染

Posted 2020-11-02 不积跬步无以至千里不积小流无以成江海

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