$.ajax()与vue结合获取数据并渲染
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
随机推荐
- machine learning for hacker记录(2) 数据分析
本章主要讲了对数据的一些基本探索,常见的six numbers,方差,均值等 > data.file <- file.path('data', '01_heights_weights_ge ...
- HTML5 <template>
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
- Program received signal SIGSEGV, Segmentation fault.
GDB调试的时候出现了: Program received signal SIGSEGV, Segmentation fault.(程序收到信号SIGSEGV,分段故障) SIGSEGV:在POSIX ...
- codeforces B. Ilya and Queries 解题报告
题目链接:http://codeforces.com/problemset/problem/313/B 题目意思:给出一个只有 "." 和 "#" 组成的序 ...
- ACM2016级新生第三周训练赛
本次是弱校题解-比赛链接 备用链接 题目还是比较基础,比较简单.认真补题,学会学习. A -人见人爱A^B 题解: 求 A的B次方,我们可以用循环进行累乘操作,进而计算出次方.因为题目要求只需要求出最 ...
- 安装tensorflow-gpu出现的问题
1.Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/usr/local/l ...
- bzoj4827
FFT+数学 先开始觉得枚举c就行了,不过我naive了 事实上c是确定的,通过化简式子可以得出一个二次函数,那么c就可以解出来了. 然后把a翻转,fft一下就行了 难得的良心题 #include&l ...
- 抓屏工具 faststone capture
百度百科 http://baike.baidu.com/link?url=te51CfOKYIEmqT1jsyRwcB8Pnals5xQ8nUXk6trvBPGSJRBO5G7BEZL7cYQxmx8 ...
- 国内互联网公司的开源项目及github地址汇总
国内互联网公司的开源项目及github地址汇总 阿里 阿里的开源项目很多,这也跟@淘宝正明的开源态度密不可分.有很多重量级的项目,例如LVS.Tengine,或者很有实践价值的中间件,例如 MetaQ ...
- 一步一步学Entity FrameWork 4(1)
http://www.cnblogs.com/qouoww/archive/2012/04/26/2471638.html http://www.cnblogs.com/qouoww/archive/ ...