vue-resourse将json数据输出实例

时间：2021-05-26

本文主要讲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);//获取了当前数组的长度，为3for(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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章