本文主要讲v-resourse 获取json数据并传递到DOM中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1.demo目录，不要管index.html和index.js
2.html页面 vue-resourse-josn1.1.html展示json中的数据
<Meta charset="UTF-8">
vue-resourse-json
编号：{{item.id}}
作者：{{item.author}}
书名{{item.name}}
价格：{{item.price}}
出版时间{{item.time}}
作者：{{item.author}}
书名{{item.name}}
价格：{{item.price}}
出版时间{{item.time}}
<script type="text/javascript" src="static/js/vue-resourse-json.js">
@H_404_29@
3.js vue-resourse-json.js
页面
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中的数据
5.结果输出
6.总结：主要理清数据请求和传递的流程就行了。
本文已被整理到了《》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题进行学习。
