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

 更新时间:2019-05-16 00:00:30   作者:佚名   我要评论(0)

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

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

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

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

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

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

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这样的格式

<script>
  import axios from 'axios'
  export default{
    data(){
      return {
        res:"",//创建对象
            
      }
    },
    mounted () {
     this.getGoodsList()
    },
    methods: {
     getGoodsList () {
      this.$axios.get('http://localhost:8080/static/ceshi.json').then((res) => {
        //用axios的方法引入地址
        this.res=res
        //赋值
       console.log(res)
      })
     }
    }
  }
</script>
<div class="hello">
   <el-table
      :data="res.data.result"
      border
      style="width: 100%">
      <el-table-column
      fixed
      prop="productId"
      label="日期"
      width="150">
      </el-table-column>
      <el-table-column
      prop="productName"
      label="岗位"
      width="120">
      </el-table-column>
      <el-table-column
      prop="prodcutPrice"
      label="手机号"
      width="120">
      </el-table-column>
      <el-table-column
      prop="prodcutImg"
      label="姓名"
      width="120">
      </el-table-column>      
    </el-table>
 
 
 </div>

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

您可能感兴趣的文章:

  • Vue导出json数据到Excel电子表格的示例
  • 详解vue 模拟后台数据(加载本地json文件)调试
  • 详解vue渲染从后台获取的json数据
  • 详解通过JSON数据使用VUE.JS
  • vue-resourse将json数据输出实例
  • 简单的vue-resourse获取json并应用到模板示例
  • vue.js学习笔记:如何加载本地json文件
  • VUE2.0中Jsonp的使用方法
  • 解决vue项目报错webpackJsonp is not defined问题
  • Vue-cli项目获取本地json文件数据的实例

相关文章

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

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

    开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现
    2019-05-16
  • elementUI table表格动态合并的示例代码

    elementUI table表格动态合并的示例代码

    1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下
    2019-05-16
  • 详解js常用分割取字符串的方法

    详解js常用分割取字符串的方法

    1.substr substr(start,length)表示从start位置开始,截取length长度的字符串。 var src="images/off_1.png"; alert(src.substr(7,3)); 弹出值为:off 2
    2019-05-16
  • Spring Boot 项目创建的详细步骤(图文)

    Spring Boot 项目创建的详细步骤(图文)

    一. 简单介绍一下Spring Boot 世界惯例,在学习一个框架之前,我们需要了解一下这个框架的来历。 下面我们引用一下百度百科的解释。 Spring Boot是由Pivotal团
    2019-05-16
  • Python常用模块之requests模块用法分析

    Python常用模块之requests模块用法分析

    本文实例讲述了Python常用模块之requests模块用法。分享给大家供大家参考,具体如下: 一. GET请求 1.访问一个页面 import requests r=requests.get('http:
    2019-05-16
  • 关于Mysql自增id的这些你可能还不知道

    关于Mysql自增id的这些你可能还不知道

    导读: 在使用MySQL建表时,我们通常会创建一个自增字段(AUTO_INCREMENT),并以此字段作为主键。本篇文章将以问答的形式讲述关于自增id的一切。 注: 本文所讲
    2019-05-16
  • JS中使用react-tooltip插件实现鼠标悬浮显示框

    JS中使用react-tooltip插件实现鼠标悬浮显示框

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https
    2019-05-16
  • 详解Python下载图片并保存本地的两种方式

    详解Python下载图片并保存本地的两种方式

    一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url="https://tim
    2019-05-16
  • SpringBoot整合MybatisPlus的简单教程实现(简单整合)

    SpringBoot整合MybatisPlus的简单教程实现(简单整合)

    最近在研究springboot,顺便就会看看数据库连接这一块的知识 ,所以当我发现有通用Mapper和MybatisPlus这两款网络上比较火的简化mybatis开发的优秀软件之后。
    2019-05-16
  • MongoDB分片集群部署详解

    MongoDB分片集群部署详解

    一、环境说明 1、我们prod环境MongoDB的集群架构是做的分片集群的部署,但是目前我们没有分片,即所有数据都在一个分片上,后期如果数量大,需要分配,集群随
    2019-05-16

最新评论