本篇内容主要讲解“vue怎么加载本地json数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么加载本地json数据”吧!
这种方法暂时还没出来,若有大神知道,可否能指导一二
1、编写好json 数据,按照这个格式编写json数据
2、安装axios 安装方法:npm install axios
3、配置axios,在main.js中引用axios,如下图所示
4、就可以调用json数据了,也可以加上一句:console.log(this.fieldParams)在控制台打印数据
表格代码:
<el-table :data="fieldParams" border > </el-table>
通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h6页面分页显示(这里以3行数据分页)
[ {"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} ]
<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>
<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>
<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数据”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。