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 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
原生js开发的日历插件
Feb 04 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
javascript 写类方式之二
2009/07/05 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
优秀教师的感人事迹
2014/02/04 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
设计师求职信
2014/07/01 职场文书
债务纠纷委托书
2014/08/30 职场文书
婚礼父母致辞
2015/07/28 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技