详解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函数
Aug 01 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
微信小程序的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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
javascript 日期常用的方法
2009/11/11 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python 实现绘制整齐的表格
2019/11/18 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
通过实例解析python and和or使用方法
2020/11/14 Python
妇产医师自荐信
2014/01/29 职场文书
文化建设工作方案
2014/05/12 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
单位工作证明书格式
2014/10/04 职场文书
《包身工》教学反思
2016/02/23 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python