$.ajax()與vue結合獲取數據並渲染

 

利用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"}
    ]
  }
]