$.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
随机推荐
- Linux下Redis C++操作的封装
安装和启动Redis服务...略!很粗糙的版本,待改进... Redis Client C++示例代码...略! /** * Time: 14-3-10 * File: RedisCache.h * ...
- [noi2002]荒岛野人 拓展欧几里得
克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,…,M.岛上住着N个野人,一开始依次住在山洞C1,C2,…,CN中,以后每年,第i个野人会沿顺时针向前走Pi个洞住下来 ...
- Codeforces Round #374 (Div. 2) C. Journey —— DP
题目链接:http://codeforces.com/contest/721/problem/C C. Journey time limit per test 3 seconds memory lim ...
- MySQL学习笔记(三)——计算字段及常用函数
拼接字段-Concat()函数 将值连接在一起构成单个值.注意:大多数DBMS使用+或者||来实现拼接,mysql则使用Concat()函数来实现. 去空格函数-Trim函数 ...
- 分布式session之redis解决方案实现
一.首先Session Session 是客户端与服务器通讯会话技术, 比如浏览器登陆.记录整个浏览会话信息.session存放在服务器,关闭浏览器不会失效. Session实现原理 客户对向服务器端 ...
- html5--3.5 input元素(4)
html5--3.5 input元素(4) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...
- html5--4-1 video/视频播放
html5--4-1 video/视频播放 学习要点 掌握video元素的基本用法 直到现在,在网页中的大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTM ...
- hive和hbase本质区别——hbase本质是OLTP的nosql DB,而hive是OLAP 底层是hdfs,需从已有数据库同步数据到hdfs;hive可以用hbase中的数据,通过hive表映射到hbase表
对于hbase当前noSql数据库的一种,最常见的应用场景就是采集的网页数据的存储,由于是key-value型数据库,可以再扩展到各种key-value应用场景,如日志信息的存储,对于内容信息不需要完 ...
- H3C-交换机密码恢复
交换机密码恢复: 一. 拔掉电源再插上重新启动交换机,在超级终端中可以看到交换机启动画面,当出现提示按CTRL+B时,此时按住CTRL+B,我们会看到有9个选项: 1. download applic ...
- ROM的分类
转载自:http://www.ic37.com/htm_tech/2012-5/82774_23811.htm ROM(只读存储器)按其内容写入方式,一般分为3种:固定内容ROM:可一次编程PROM: ...