1. 程式人生 > >$.ajax()與vue結合獲取數據並渲染

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

zhang IT one ID ucc article ext html ajax

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結合獲取數據並渲染