vue-resourse将json数据输出实例


Posted in Javascript onMarch 08, 2017

本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1.demo目录,不要管index.html和index.js

vue-resourse将json数据输出实例

2.html页面 vue-resourse-josn1.1.html展示json中的数据

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>vue-resourse-json</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in itemList" :id="item.id" style="list-style-type: none;">

编号:{{item.id}}</br>
作者:{{item.author}}</br>
书名{{item.name}}</br>
价格:{{item.price}}</br>
出版时间{{item.time}}</br>

</li>
</ul>
</div> 
<script src="static/js/libs/vue.js"></script>
<script src="static/js/libs/vue-resource.min.js"></script>

<script type="text/javascript" src="static/js/vue-resourse-json.js"></script>
</body>
</html>

3.js vue-resourse-json.js

var app = new Vue({
el:"#app",
data:{
//声明空数组,进行数据接收,最后传递到前端页面
itemList:[], 
},
//向data数组里添加数据
mounted:function(){
this.getData();
},
methods: {
getData:function () {
var self = this;
this.$http.get("static/data/list_json.json").then(function (res) {

console.log(res);

//var lens = res.body.lists.length;
//console.log(lens);
//获取了当前数组的长度,为3
for(var i= 0,len=res.body.lists.length;i<len;i++){
//已经获取json数组中的数据,接下来如何传递到前端页面中
//获取全部数据
var selData = res.body.lists[i]; 
//console.log(selData);

//获取数组中的部分数据
var part = res.body.lists[i].name;
//console.log(part);
//将获取的数据push到空的数组中itenList,
self.itemList.push(selData);

}
})
}
}
});

4.json为list_josn.json

下面是json中的数据

{
"lists":[
{
"id":"1",
"author":"小华",
"name":"《春天来了》",
"price":"23",
"time":"1998-03-12"
},
{
"id":"2",
"author":"老舍",
"name":"《济南的冬天》",
"price":"32",
"time":"1956-12-09"
},
{
"id":"3",
"author":"朱自清",
"name":"《背影》",
"price":"40",
"time":"1943-09-12"
}
]
}

5.结果输出

vue-resourse将json数据输出实例

6.总结:主要理清数据请求和传递的流程就行了。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
javascript制作2048游戏
Mar 30 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 #Javascript
js实现五星评价功能
Mar 08 #Javascript
ionic2 tabs 图标自定义实例
Mar 08 #Javascript
微信小程序 弹窗自定义实例代码
Mar 08 #Javascript
jQuery实现图片滑动效果
Mar 08 #Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 #Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
You might like
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php 可变函数使用小结
2018/06/12 PHP
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python日志syslog使用原理详解
2020/02/18 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
教师岗位说明书
2015/09/30 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android
python游戏开发Pygame框架
2022/04/22 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL