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 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
js命名空间写法示例
Dec 18 Javascript
js实现无缝滚动特效
Dec 20 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 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 dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python调用百度语音REST API
2018/08/30 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
好的自荐信的要求
2013/10/30 职场文书
年度考核自我鉴定
2013/11/09 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
班级旅游计划书
2014/05/03 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
环卫工作汇报材料
2014/10/28 职场文书
会计做账心得体会
2016/01/22 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
5个实用的JavaScript新特性
2022/06/16 Javascript