本篇内容主要讲解“vue怎么加载本地json数据”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么加载本地json数据”吧!
vue加载本地json数据
json数据存放在除static静态文件夹中
这种方法暂时还没出来，若有大神知道，可否能指导一二
json数据存放在static静态文件夹中
编写好json 数据，按照这个格式编写json数据
安装axios 安装方法：npm install axios
配置axios，在main.js中引用axios，如下图所示
就可以调用json数据了，也可以加上一句：console.log(this.fieldParams)在控制台打印数据
表格代码：
<el-table :data="fieldParams" border ></el-table>读取本地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代码如下
<body> <div id ="app" v-cloak> <table border="1px" class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tr v-for="student in stuData"> <td>{{ student.stuId }}</td> <td>{{ student.stuName }}</td> <td>{{ student.stuSex }}</td> <td>{{ student.stuAge }}</td> </tr> </table> <!-- 用无序列表做一个页码导航条--> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="prePage"> < </a></li> <li v-for="(value,index) in pageNumber"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="thisPage(index)">{{ index+1 }}</a> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="nextPage"> > </a></li> </ul> </div></body>css样式
<style> [v-cloak]{ display: none; } ul{ margin-left: 20px; } ul li{ float: left; list-style: none; background-color: aqua; } ul li a{ text-decoration: none; padding: 5px 15px; color:black; border: 1px solid white; } a:hover{ background: tomato; }</style>js代码
<script> //创建Vue实例,得到 ViewModel var app = new Vue({ el: '#app', data: { list:[], pageSize:3,//每页大小 currentPage:0 //当前页码 }, mounted(){ //异步加载json数据 axios.get('/json/student.json',{}).then(function(response){ app.list=response.data; }); }, methods: { //上一页 nextPage: function(){ if (this.currentPage == this.pageNumber - 1) return; this.currentPage++; }, //下一页 prePage: function(){ if (this.currentPage == 0) return; this.currentPage--; }, //页码 thisPage: function(index){ this.currentPage = index; } }, computed: { //分页数据 stuData: function(){ let left = this.currentPage*this.pageSize; let right = Math.min((this.currentPage+1)*this.pageSize, this.list.length) return this.list.slice(left, right);//取出一页数据 }, //共有多少页 pageNumber: function(){ if(this.list.length<=this.pageSize){ return 1; } return Math.ceil(this.list.length / this.pageSize); } }, }); </script>运行效果
到此，相信大家对“vue怎么加载本地json数据”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
