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项目时遇到npm安装错误可使用命令npminstall--legacy-peer-deps解决,若VsCode中无法运行npm命令,则可能是IDE配置未生效,可尝试重启电脑或使用cmd命令行直接在项目目录下运行2024-10-10
VUE使用vue-tree-color组件实现组织架构图并可以动态更新数据的效果
本文主要介绍了如何在Vue中使用vue-tree-color组件实现组织架构图,并详细介绍了如何实现数据的动态加载,在动态加载数据时,要确保数据更新是在Vue的响应式系统能捕获到的情况下进行的2024-10-10
这篇文章主要介绍了vue-cli3项目展示本地Markdown文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
本篇文章主要介绍了VUE中使用Vue-resource完成交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要给大家介绍了关于vue中数据字典dicts的简单说明和用法的相关资料,如果您想在Vue中使用字典查询,您可以使用Vue的计算属性和方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue弹出框组件封装，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了VUE 实现动态给对象增加属性，并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下2019-11-11
vue3使用el-radio-group获取表格数据无法选中问题及解决方法
这篇文章主要介绍了vue3使用el-radio-group获取表格数据无法选中问题及解决方法,本文给大家介绍的非常详细,需要的朋友可以参考下2024-05-05
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了vue中巧用三元表达式解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论