$.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
随机推荐
- Could not find com.android.tools.lint:lint-gradle:26.1.2.
allprojects { repositories { flatDir { dirs 'libs' } jcenter() google() }}
- Codeforces Round #401 (Div. 2) C Alyona and Spreadsheet —— 打表
题目链接:http://codeforces.com/contest/777/problem/C C. Alyona and Spreadsheet time limit per test 1 sec ...
- NYOJ-37 回文字符串 —— LCS变形
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=37 题解: 一开始想从两边向中间添加字符,发现这样不是最优的.因为加入字符之后,这些原本存 ...
- ffmpeg遇到inttypes.h和UINT64_C
http://blog.csdn.net/cll131421/article/details/7763657 编译过程:错误一:无法打开包括文件:“inttypes.h”: No such file ...
- 「LuoguP1379」 八数码难题(迭代加深
[P1379]八数码难题 - 洛谷 题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种 ...
- 关于ubuntu 16.04 docker常用命令
1.sudo docker ps -a 查看当前docker实例的信息: CONTAINER ID IMAGE COMMAND ...
- kitti数据集标定文件解析
1.kitti数据采集平台 KITTI数据集的数据采集平台装配有2个灰度摄像机,2个彩色摄像机,一个Velodyne64线3D激光雷达,4个光学镜头,以及1个GPS导航系统.图示为传感器的配置平面图, ...
- 内存泄漏分析工具tMemMonitor (TMM)使用简介
C/C++由于灵活.高效的优点一直以来都是主流的程序设计语言之一,但是其内存的分配与释放均由程序员自己管理,当由于疏忽或错误造成程序未能释放不再使用的内存时就会造成内存泄漏.在大型.复杂的应用程序中, ...
- TFS独占签出代码
最近发现微软给我们提供了免费的TFS,地址:http://tfs.visualstudio.com/, 就注册了一个,但是我发现没办法独占签出. 在公司里,TFS有服务端,所以很好设置,但是注册微软的 ...
- 4.oracle正确卸载步骤
oracle 11g如何完全卸载 方法/步骤1: 停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 方法/步骤2: 在开始菜单中,找到oracle-> ...