详解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 Event学习第六章 事件的访问
Feb 07 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
js表单登陆验证示例
Oct 19 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue 项目分环境打包的方法示例
Aug 03 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP 图片上传代码
2011/09/13 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
Vue 去除路径中的#号
2018/04/19 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue实现分页组件
2020/06/16 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
陈欧广告词
2014/03/14 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书