vue怎么加载本地json数据

本篇内容主要讲解"vue怎么加载本地json数据"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue怎么加载本地json数据"吧!

vue加载本地json数据

json数据存放在除static静态文件夹中

这种方法暂时还没出来，若有大神知道，可否能指导一二

json数据存放在static静态文件夹中

1、编写好json 数据，按照这个格式编写json数据

2、安装axios 安装方法：npm install axios

3、配置axios，在main.js中引用axios，如下图所示

4、就可以调用json数据了，也可以加上一句：console.log(this.fieldParams)在控制台打印数据

表格代码：

读取本地json文件并分页显示

功能实现

通过axios异步加载技术读取本地的json文件内容，并通过vue.js处理数据在h6页面分页显示（这里以3行数据分页）

student.json数据如下

[  {"stuId":1,"stuName":"李华","stuSex":"男","stuAge":20},  {"stuId":2,"stuName":"张国伟","stuSex":"男","stuAge":22},  {"stuId":3,"stuName":"刘艳","stuSex":"女","stuAge":19},  {"stuId":4,"stuName":"李小燕","stuSex":"女","stuAge":22},  {"stuId":5,"stuName":"张鹏","stuSex":"男","stuAge":26},  {"stuId":6,"stuName":"李晔","stuSex":"女","stuAge":20},  {"stuId":7,"stuName":"钱国强","stuSex":"男","stuAge":21},  {"stuId":8,"stuName":"张三","stuSex":"男","stuAge":22},  {"stuId":9,"stuName":"唐毓民","stuSex":"男","stuAge":25},  {"stuId":10,"stuName":"玛丽亚","stuSex":"女","stuAge":21},  {"stuId":11,"stuName":"李家明","stuSex":"男","stuAge":21}]

h6代码如下

  
    
      
         
           
序号
           
姓名
           
性别
           
年龄
         
      
     
       
{{ student.stuId }}
       
{{ student.stuName }}
       
{{ student.stuSex }}
       
{{ student.stuAge }}
     
    
        
      
 < 
      
       {{ index+1 }}      
      
 > 
    
  

css样式

js代码

运行效果

到此，相信大家对"vue怎么加载本地json数据"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！