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 相关文章推荐
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
用vue 实现手机触屏滑动功能
May 28 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php adodb操作mysql数据库
2009/03/19 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
校园安全广播稿
2014/02/08 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
雷人标语集锦
2014/06/19 职场文书
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL