详解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中的noscript元素属性位置及作用介绍
Apr 11 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
vue自定义filters过滤器
Apr 26 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
PHP 批量删除 sql语句
2009/06/05 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
centos7之Python3.74安装教程
2019/08/15 Python
python 实现字符串下标的输出功能
2020/02/13 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
TCP/IP的分层模型
2013/10/27 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
水果超市创业计划书
2014/01/27 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
公司证明怎么写
2014/09/22 职场文书
2014年消防工作总结
2014/11/21 职场文书
校长师德表现自我评价
2015/03/05 职场文书