vue-resourse将json数据输出实例

这篇文章主要为大家详细介绍了vue-resourse将json数据输出实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文主要讲v-resourse 获取json数据并传递到DOM中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1.demo目录，不要管index.html和index.js

2.html页面 vue-resourse-josn1.1.html展示json中的数据

   vue-resourse-json    编号：{{item.id}}
 作者：{{item.author}}
 书名{{item.name}}
 价格：{{item.price}}
 出版时间{{item.time}}

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

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.结果输出