详解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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
Js sort排序使用方法
Oct 17 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
详解javascript void(0)
Jul 13 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Atom的python插件和常用插件说明
2018/07/08 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
商务英语专业毕业生求职信
2014/07/06 职场文书
工伤调解协议书
2016/03/21 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python