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. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  2. 使用adb命令查看android中的数据库

    在采用数据库操作时,经常会出现查询或删除等操作语句执行失败,但是有找不到具体原因.下面将介绍一种命令行方式进行数据库操作,来验证android中的数据库操作语句是否正确等. 具体操作步骤如下: (1) ...

  3. 编译thrift外篇-关于默认链接包-(使用mapkeeper运行leveldb成功)

    根据 https://stackoverflow.com/questions/9922949/how-to-print-the-ldlinker-search-path 使用 ldconfig -v ...

  4. NLP任务中的基本指标(precision and recall )

    >>以下内容参考wikipedia. https://en.wikipedia.org/wiki/Precision_and_recall 精确度 precision  = (true p ...

  5. 如何使用 Jmeter 发送 Json 请求

    公司最近有一个项目,需要持续发送大量的 Json 请求到服务器,从而测试服务器可靠性. 我就发送 Json 请求部分发布这个博客. 一般来说, Json 请求的数据都保存到 CSV 文件中,然后使用 ...

  6. c++之cin/cin.get/cin.getline()详解

    C++输入过程中,是把输入加载到缓冲区中,然后对缓冲区中的字符进行读取.cin,cin,get(),cin.getline()三个函数虽然都能进行数据读取,但是它们对缓冲区内数据的处理方法是不同的(如 ...

  7. CSS3:CSS 听觉参考手册

    ylbtech-CSS3:CSS 听觉参考手册 1.返回顶部 1. 听觉样式表 听觉样式表可把语音合成与音响效果相组合,使用户可以听到信息,而无需进行阅读. 听觉呈现可用于: 视觉能力低弱的人士 帮助 ...

  8. JSP提交表单的几种方法

    1.通过<form action="url"><input type="submit"></form>按钮方式提交 这种方式 ...

  9. Hadoop中Yarnrunner里面submit Job以及AM生成 至Job处理过程源码解析

    参考 http://blog.csdn.net/caodaoxi/article/details/12970993 Hadoop中Yarnrunner里面submit Job以及AM生成 至Job处理 ...

  10. 理解复杂的const和typedef和指针的关系

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