vue-resourse将json数据输出实例

发布时间：2020-12-17 03:03:04 所属栏目：百科来源：网络整理

导读：本文主要讲v-resourse 获取json数据并传递到DOM中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 1.demo目录，不要管index.html和index.js 2.html页面 vue-resourse-josn1.1.html展示json中的数据 vue-resourse-json 编号：{{item.id}} 作者：{{item.a

本文主要讲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

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组件的教程，请大家点击专题进行学习。

更多vue学习教程请阅读专题

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!