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

 

利用json文件模拟ajax获取数据,vue渲染数据:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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);
               }
           }
});

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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"}
    ]
  }
]

 

posted @   安静的嘶吼  阅读(19651)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示