$.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
随机推荐
- NSString和NSMutableNSString的基本用法
// // main.m // NSString /** NSString 1.NSString 是一个不可以变的字符串对象 2.NSMutableString是一个可变字符串. 下面代码为字符串的: ...
- Apple 企业开发者账号&邓白氏码申请记录 ----转
1.账号分类 Apple开发者账号分三种,个人,公司,还有企业.个人和公司都称为标准账号. 还有一种是教育机构的账号. 现在记录先: 申请日期2013年4月26 看申请周期有多长. 账号介绍 个人和公 ...
- CentOS(Linux) - 安装软件笔记(一) - VPSMate(服务器可视化管理工具)安装
更多详情点击参考官网说明 vpsmate官方推荐centos版本为6.2 64位 使用 SSH 连接工具,如 PuTTY.XShell.SecureCRT 等,连接到您的 Linux 服务器. 执行以 ...
- 提高scroll性能
在DevTools中开始渲染,向下滑动一点点滚动条,然后停止滚动. 在结果中,注意frames总是在30ftps线上面,甚至都木有很接近69ftps线的(事实上帧执行的太缓慢以致于60ftps线在图上 ...
- 001-将Python源码转换为不需要环境的可执行文件
1 安装pyinstaller pip install pyinstaller #或者 pip3 install pyinstaller 2 生成打包文件 在命令行中输入 pyinstaller -F ...
- chan_ss7 呼出的时候指定使用某个CICs,或者CICs范围 的方法
Linkset one: 1-31 Incoming 33-58 Outgoing 58-63 Emergency Traffic Linkset two: 1-31 Incoming 33-58 ...
- python装饰器精髓代码
#!/usr/bin/env python #-*- coding:utf-8 -*- import time def foo(func): def inner(): print('fs...') f ...
- IntelliJ IDEA 2018 设置代码提示对大小写不敏感
setting->Editor->General->Code Completion取消勾选Match case
- win10 下安装linux子系统
一.开发人员选项 打开控制面板->程序与功能->启用或关闭windows功能 勾选 [适用于linux的windows子系统] 选项 打开win10设置 找到更新与安全 启动开 ...
- Jasper:API / 后向兼容性
ylbtech-Jasper:API / 后向兼容性 1.返回顶部 1. 后向兼容性 为了给客户提供创新的业务解决方案,Cisco Jasper 会定期扩展我们 API 框架的功能.我们会尽最大努力确 ...