vue-resourse中怎么输出json数据

这篇文章给大家介绍vue-resourse中怎么输出json数据，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联建站专注于克井企业网站建设,响应式网站建设,商城网站建设。克井网站建设公司,为克井等地区提供建站服务。全流程按需网站设计，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

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;i4.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数据就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。            
            
                            

                名称栏目：vue-resourse中怎么输出json数据                

                转载来于：http://dzwzjz.com/article/peshcg.html

大橙子网站建设，新征程启航

vue-resourse中怎么输出json数据

其他资讯