vue-资源将json数据输出实例

本文主要讲v-资源获取json数据并传递到数字正射影像图中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

！DOCTYPE html html lang=' en ' hearteta charset=' UTF-8 ' title vue-resource se-JSON/title/head dydiv id=' app ' ulli v-for=' item list '中的项： 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脚本src=' http : static/js/libs/vue。js '/script script src=' http : static/js/libs/vue-resource。量滴js '/script脚本类型=' text/JavaScript ' src=' http : static/js/vue-resource se-JSON。js '/script/body/html 3。js vue-资源-js

var app=new Vue({el:'#app '，data:{//声明空数组，进行数据接收，最后传递到前端页面itemList:[]，}，//向数据数组里添加数据挂载ed :函数(){这个。GetDATa()；}，方法： { getdata : FuncTion(){ var self=this；这个$ http。get(' static/data/list _ JSON。JSON ').然后（函数(RES){控制台。日志(RES)；//var lens=RES . body。名单。长度；//console.log(镜头);//获取了当前数组的长度，为3for(var i=0，len=RES . body。名单。长度；伊琳；i ){//已经获取json数组中的数据，接下来如何传递到前端页面中//获取全部数据var sel DATa=RES . body。列表[I]；//控制台。日志(出售数据)；//获取数组中的部分数据var部分=RES . body。清单1 .姓名；//console.log(部分);//将获取的数据推到空的数组中它是在线的，自我的。项目列表。推送(出售数据)；}})}}});4.json为list_josn.json

下面是json中的数据

{ ' list ' :[{ ' id ' : ' 1 '，'作者' : '小华，'名称' :' 《春天来了》 ','价格' :'23 ','时间：'1998-03-12'}，{'id':'2 '，'作者' : '老舍，'姓名' :' 《济南的冬天》 ','价格' :'32 ','时间：'1956-12-09'}，{'id':'3 '，'作者' : '朱自清，'名称' :' 《背影》 ','价格' :'40 ','时间' :'1943-09-12'}]}5。结果输出

6.总结：主要理清数据请求和传递的流程就行了。

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多某视频剪辑软件学习教程请阅读专题《vue实战教程》

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