vue-resourse将json数据输出实例
更新时间：2017年03月08日 15:55:15 作者：gz_blog
这篇文章主要为大家详细介绍了vue-resourse将json数据输出实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文主要讲v-resourse 获取json数据并传递到DOM中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1.demo目录，不要管index.html和index.js
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.结果输出
6.总结：主要理清数据请求和传递的流程就行了。
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue.js每天必学之过滤器与自定义过滤器,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
记录使用Nginx将纯前端的Vue3项目部署到阿里云服务器（Ubuntu 22.04）上,包含通过Nginx代理实现跨域请求、以及个人踩坑记录,感兴趣的朋友一起看看吧2024-04-04
这篇文章主要介绍了Vue.js递归组件实现组织架构树和选人功能,本文通过案例代码讲解的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue项目打包后浏览器缓存问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue使用百度地图报错BMap is not defined问题及解决
这篇文章主要介绍了vue使用百度地图报错BMap is not defined问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇文章主要介绍了如何在vue中使用ts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
在Vue中，动画效果是非常有用的，它可以使用户界面变得更加生动、有趣，本文中我们将学习如何在Vue中进行自定义动画与动画效果设计，感兴趣的可以了解一下2023-06-06
这篇文章主要介绍了vue中关于checkbox使用的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
最新评论