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. PAT 天梯赛 L1-050. 倒数第N个字符串 【字符串】

    题目链接 https://www.patest.cn/contests/gplt/L1-050 思路 因为是求倒数 我们不如直接 倒过来看 令 zzz 为第一个字符串 我们可以理解为 十进制 转换为 ...

  2. cannot find -lbz2 解决方法

    sudo yum install -y bzip2* 或者sudo apt-get install bzip2* 还是报错就找到libbz2.so.1,建立连接或者复制到 /usr/lib/libbz ...

  3. spring 从jsp到jsp

    小例子 1.jar信息 2.web.xml文件配置 <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  4. 机器学习(十六)— LDA和PCA降维

    一.LDA算法 基本思想:LDA是一种监督学习的降维技术,也就是说它的数据集的每个样本是有类别输出的.这点和PCA不同.PCA是不考虑样本类别输出的无监督降维技术. 我们要将数据在低维度上进行投影,投 ...

  5. 对服务器上所有Word文件做全文检索的解决方案-Java

    一.背景介绍    Word文档与日常办公密不可分,在实际应用中,当某一文档服务器中有很多Word文档,假如有成千上万个文档时,用户查找打开包含某些指定关键字的文档就变得很困难,目前这一问题没有好的解 ...

  6. 【C/C++】任意大于1的整数分解成素数因子乘积的形式

    // #include<stdio.h> #include<math.h> #include<malloc.h> int isprime(long n); void ...

  7. I.MX6 Surfaceflinger 机制

    /**************************************************************************** * I.MX6 Surfaceflinger ...

  8. http://www.cnblogs.com/dasenglin/p/5821987.html

    一安装maven 先安装jdk,配置JAVA_HOME 把下载的maven bin包,解压到指定目录,比如:D:\apache-maven-3.3.9-bin 配置maven的系统变量M2_HOME和 ...

  9. ElasticSearch基础之批量操作(mget+mbulk)

      在前面的演示中,我们都是基于一次http查询,每次查询都要建立http的三次握手请求,这样比较耗费性能!因此ES给我们提供了基本的批量查询功能,例如如下的查询,注意里面的index是可以任意指明的 ...

  10. 继承映射关系 joinedsubclass的查询

    会出现下面这样的错一般是配置文件中的mapping和映射文件中的package路径或者class中的name路径不一致 org.hibernate.MappingException: Unknown ...