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

随机推荐

  1. 解决Error:Unable to find method 'org.gradle.api.internal.project.ProjectInternal.

    错误描述今天在Github上面下载了一份代码,然后导入到Android Studio中直接报错误 错误描述如下: Error: Unable to find method ‘org.gradle.ap ...

  2. weixin报警脚本

    #!/bin/bash ### script name weixin.sh ### send messages from weixin for zabbix monitor ### jack ### ...

  3. codeforces A. Nuts 解题报告

    题目链接:http://codeforces.com/problemset/problem/402/A 题目意思:几经辛苦,终于体明题目噶意思了 = =,完全是考验一个人是否清醒的最简便方法- -! ...

  4. python并发编程之多线程理论部分

    阅读目录 一 什么是线程 二 线程的创建开销小 三 线程与进程的区别 四 为何要用多线程 五 多线程的应用举例 六 经典的线程模型(了解) 七 POSIX线程(了解) 八 在用户空间实现的线程(了解) ...

  5. 非旋treap套线段树

    BZOJ3065. 去年用pascal 块链过了.. 今年来试了试非旋treap大法   注定被块链完爆 代码留这. 第一份 :辣鸡的  垃圾回收做法  跑得极慢 #include <bits/ ...

  6. 合并多个cv::Mat类型,即合并多个图片的接口

    1. cv::Mat get_merage_image(cv::Mat cur_frame) { cv::Mat image_one=cur_frame; cv::Mat image_two=cur_ ...

  7. C++基础--完善Socket C/S ,实现客户端,服务器端断开重连

    // WindowsSocketServer.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h"#include <iostream> ...

  8. UnicodeEncodeError: 'ascii' codec can't encode character u'\u65e0' in position 1: ordinal not in range(128)

    UnicodeEncodeError: 'ascii' codec can't encode character u'\u65e0' in position 1: ordinal not in ran ...

  9. Firebug 的脚本页面不能用

    1.遇到这种情况,一般重置firebug,然后开启“脚本“功能,刷新页面,就能显示正常 2.要不就是 版本问题,50.0不行,下载回49版本就可以了

  10. 坑暗花明:又遇 .NET Core 中 System.Data.SqlClient 查询缓慢的问题

    之前发布过一篇博文 下单快发货慢:一个 JOIN SQL 引起 SqlClient 读取数据慢的奇特问题,当时遇到的问题是从 SQL Server 2008 R2 中查询获取 100 条记录竟然耗时 ...