这篇文章主要介绍了vue如何加载本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
- vue加载本地json数据
- json数据存放在除static静态文件夹中
- json数据存放在static静态文件夹中
- 读取本地json文件并分页显示
- 功能实现
- student.json数据如下
- h5代码如下
- css样式
- js代码
- 运行效果
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如何实现Json格式数据展示
- Vue 实现把表单form数据 转化成json格式的数据
- Vue axios 将传递的json数据转为form data的例子
- vue.js实现数据库的JSON数据输出渲染到html页面功能示例
- Vue中如何获取json文件中的数据
