zoukankan      html  css  js  c++  java
  • $.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"}
        ]
      }
    ]
    

      https://www.cnblogs.com/yg_zhang/p/6158612.html

    https://blog.csdn.net/qq_39740187/article/details/77369749

  • 相关阅读:
    02-qiankun-gitsubmodule使用及部署流程
    01-eslint/vetur/preitter/vscode配置
    01-mac m1 安装nvm / node-sass报错
    17-JS数组方法,是否改变原数组归纳
    03-webpack之require.context()实现前端工程自动化
    最小生成树prim算法
    bfs
    数据结构实验三题目一
    邻接表
    邻接矩阵
  • 原文地址:https://www.cnblogs.com/agansj/p/8983021.html
Copyright © 2011-2022 走看看