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. [bzoj1002] [FJOI2007]轮状病毒轮状病毒(基尔霍夫矩阵)

    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子 和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下 ...

  2. CSS阶段总结

    CSS布局之左右布局与左中右布局 方法:为子元素设置浮动,然后在其父元素上使用clearfix类来清除浮动.代码示例: html部分: <div class="parent clear ...

  3. Java 递归算法,遍历文件夹下的所有文件。

    用递归算法遍历文件下的所有子文件夹和子文件 文件夹遍历方法 public void getFileList(String strPath){ File f=new File(strPath); try ...

  4. 盒子的display属性

    <body> <div style="display:inline">Box-1</div> <div style="displ ...

  5. linux下环境搭建

    1.jdk https://ivan-site.com/2012/05/download-oracle-java-jre-jdk-using-a-script/ 在linux用wget直接下载JDK ...

  6. UESTC - 900 方老师炸弹 —— 割点

    题目链接:https://vjudge.net/problem/UESTC-900   方老师炸弹 Time Limit: 4000/2000MS (Java/Others)     Memory L ...

  7. Ubuntu安装基础教程

    作者:TeliuTe 来源:基础教程网 二十三.安装Ubuntu14.04 返回目录 下一课 14.04 版安装与前面版本类似,学习中遇到不清楚的地方,可以参考一下前面的内容,操作中注意细心,下面来看 ...

  8. postNotificationName 消息传递详解

      1.定义消息创建的关联值 也就是找到方法的标志 NSString *const GameToIPhoneNotification = @"GameToIPhoneNotification ...

  9. python与c#的交互模块pythonnet

    今天总结一下python与c#的交互模块pythonnet,其实微软也是有相应的解释器的,就是Ironpython,可是毕竟Ironpython还有很多东西没有从python那边继承过来,所以有时候用 ...

  10. linux sdk配置

    http://blog.csdn.net/wudj810818/article/details/51251408,环境变量配置不要用 SDK环境变量: export PATH=$PATH:/opt/a ...