详解VUE调用本地json的使用方法-成都快上网建站

详解VUE调用本地json的使用方法

开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况。

专注于为中小企业提供成都做网站、成都网站制作、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业昆山免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

下面我说下我这的情况,大家依情况代入

当然vue你刚开始创建的话,你是要去配置下东西,下面我说的是你的项目能够跑起来的情况,完咯再去想办法去引用json,当然我这里用的也是axios的获取方法,如果不是这种方法的可以带过了

首先你要知道那你的json应该放在哪个文件夹下(普通引用)如果你想写的有自己的规范,可以按照你自己的方式来。在网上看见了几个放在不同文件夹下的,好像要去配置什么东西,我也没细看,但标准模式下最好放到你的static的文件夹下,来上图

详解VUE调用本地json的使用方法

如果没有放到这个文件夹下可能会报错哟!

json数据一定要写的规范

{
  "status":"0",
  "result":[
   {
     "productId":"10001",
     "productName":"小米6",
     "prodcutPrice":"2499",
     "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10002",
    "productName":"小米笔记本",
    "prodcutPrice":"3999",
    "prodcutImg":"note.jpg"
   },
   {
    "productId":"10003",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10004",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"1.jpg"
   },
   {
    "productId":"10001",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10002",
   "productName":"小米笔记本",
   "prodcutPrice":"3999",
   "prodcutImg":"note.jpg"
  },
  {
   "productId":"10003",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10004",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"1.jpg"
  }
  ] }

json写好后就需要去引入了,想办法调用到这些数据咯由于是本地连接的地址一定要http://localhost:8080/static/ceshi.json这样的格式


以上所述是小编给大家介绍的VUE调用本地json的使用方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


名称栏目:详解VUE调用本地json的使用方法
标题网址:http://kswjz.com/article/jepehd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流