$.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
随机推荐
- objective-c的代码块block
一.block 1.bock是由于^开头,括号里面填写参数类型. 标准代码块: 返回值 (^代码块名称) (参数类型) = ^(参数) {方法体}; 2.我们的块即可以定义在函数内或者对象 ...
- int 转十六进制
//使用1字节就可以表示bpublic static String numToHex8(int b) { return String.format("%02x", b ...
- SPOJ7258
传送门 这题可以参考平衡树求第k大的过程,需要预处理一下从当前节点往下走能走出多少个子串. 原本准备存个图用反向的topsort,发现极为麻烦,看了别人的代码后发现,他们按step大小用了基排,省了很 ...
- ora-12519:TNS ,no appropriate service handler found
今天有同事反应,数据库连不了,提示 ora-12519:TNS ,no appropriate service handler found: 一开始以为监听没有启动,排查后,发现正常:于是google ...
- nyoj 86 --位标记
nyoj 86 --位标记 点击打开题目链接 : 找球号(一) 这道题目很多解法,其他解法请参考 http://www.cnblogs.com/play ...
- 使用Axis2创建Web Service
Axis2是新一代Web Service开发工具,目前最新版本是1.5.本文主要介绍如何用Axis2创建Web Service. 首先下载二进制包和war包,将war包复制到Tomcat的webapp ...
- div显示2列
#wdjContainer{ border:1px solid green; margin:10px auto; width:500px; height:300px; line-height:30px ...
- Qt教程
https://blog.csdn.net/louis_815/article/details/54286544 软件下载:http://download.qt.io/ https://blog.cs ...
- OnCtlColor
https://baike.baidu.com/item/OnCtlColor/4750440?fr=aladdin CTLCOLOR_BTN 按钮控件 · CTLCOLOR_DLG 对话框 · CT ...
- 使用BFG清除git仓库中的隐私文件或大文件
使用git时间不长,在调机械臂项目的时候,由于对TwinCAT3和vs的机制不太了解,没有添加很好的忽略文件(.gitignore).造成git仓库包含了很多没有用的文件,例如vs的sdf文件,Twi ...