您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。