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


Posted in Javascript onMay 15, 2019

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

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

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

<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的使用方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 #Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 #Javascript
小程序绑定用户方案优化小结
May 15 #Javascript
pm2发布node配置文件ecosystem.json详解
May 15 #Javascript
JQuery常见节点操作实例分析
May 15 #jQuery
You might like
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
js实现左右轮播图
2020/01/09 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python实现员工管理系统
2018/01/11 Python
python中for用来遍历range函数的方法
2018/06/08 Python
深入浅析Python的类
2018/06/22 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
职业生涯规划书基本格式
2014/01/06 职场文书
2014的自我评价
2014/01/13 职场文书
餐饮营销方案
2014/02/23 职场文书
股份合作协议书
2014/04/12 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
村容村貌整治方案
2014/05/21 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年教学工作总结
2015/04/02 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书