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

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

2.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}
]

3.h5代码如下

<body><div id ="app" v-cloak><table border="1px" style="width: 400px;" 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="#" @click="prePage"> < </a></li><li v-for="(value,index) in pageNumber"><a href="#" @click="thisPage(index)">{{ index+1 }}</a></li><li><a href="#" @click="nextPage"> > </a></li></ul></div>
</body>

4.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>

5.js代码

<script>//创建Vue实例,得到 ViewModelvar 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>

6.运行效果

Vue.js读取本地json文件并分页显示相关推荐

JS 变量保存为本地json文件，读取本地json文件为变量
一.变量保存为本地json文件: 第一步:把返回的数据转成json格式 var content = json.stringify(data); 第二步:把转成blob这种格式 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
JS读取本地CSV文件数据
JS读取本地CSV文件数据文件中的部分数据如图需求是需要提取出文件的数据使用到的模块是 Papa Parse 1. 依赖安装 yarn add papaparse papaparse的基本使用可 ...
android mp3 lrc歌词文件utf-8歌词显示为乱码,Android读取本地json文件的方法(解决显示乱码问题)...
本文实例讲述了Android读取本地json文件的方法.分享给大家供大家参考,具体如下: 1.读取本地JSON ,但是显示汉字乱码 public static String readLocalJson ...
php读本地json文件内容,php读取本地json文件有哪些方法
这次给大家带来php读取本地json文件有哪些方法,php读取本地json文件的注意事项有哪些,下面就是实战案例,一起来看一下. 1.data.json文件{ "goods":[ ...
vue 项目如何读取本地json文件数据
在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 import axios from 'axios' / ...
Vue3通过axios来读取本地json文件
前言一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行读取. 本人在项目开发中,要实现地图的 ...
js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好而且外面还下雨了,每天只能坐在老家打开电脑,看看文章,写写文章今天我给大家带来一篇Flutter加载本地JSON文件教程本头条核心宗旨欢迎来到「技术刚刚好」作者,「 ...

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

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

Vue.js读取本地json文件并分页显示相关推荐

最新文章

热门文章