vue如何加载本地json数据
更新时间：2022年04月07日 08:49:59 作者：dengdengchen
这篇文章主要介绍了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)在控制台打印数据
表格代码：
<el-table
:data="fieldParams"
border
style="width:100%"
>
</el-table>读取本地json文件并分页显示
功能实现
通过axios异步加载技术读取本地的json文件内容，并通过vue.js处理数据在h5页面分页显示（这里以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}
]
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="#" 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二级菜单导航点击选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了vue上通过krpano.js实现360全景图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-10-10
Vue elementui如何实现表格selection的默认勾选
这篇文章主要介绍了Vue elementui如何实现表格selection的默认勾选问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了electron vue 模仿qq登录界面,首先使用vuecli创建vue项目，安装electron，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue 实现显示/隐藏层的思路（加全局点击事件）,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
下面小编就为大家分享一篇vue-cli开发时,关于ajax跨域的解决方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
组件中多个el-upload存在导致上传图片失效的问题及解决
这篇文章主要介绍了组件中多个el-upload存在导致上传图片失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本篇文章主要介绍了详解VUE的状态控制与延时刷新，实例分析了数据延时到展示的时候再去刷新的技巧，有兴趣的可以了解一下。2017-03-03
这篇文章主要为大家详细介绍了vue自定义可选时间的日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论