怎么使用vue实现分页加载效果-创新互联
这篇文章主要介绍怎么使用vue实现分页加载效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专注于企业成都全网营销、网站重做改版、大柴旦网站定制设计、自适应品牌网站建设、H5场景定制、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为大柴旦等各大城市提供网站开发制作服务。vue分页加载的具体代码如下
HTML
共{{data.length}}个商品{{pages}} / {{total}}
-
{{value.name}} ¥{{value.price}}
查看详情
上一页
{{index+1}}
下一页
js
data(){ return{ data:"",//页面数据 num:0, pages:1,//当前页数 priceQuery:false,//价格排序判断 Total:"",//总页数(向上取整) initial:4,//默认加载数量 total:"",//最终页数 } }, created(){ //获取初始数据 axios.get("'../../static/mock/data.json").then(res=>{ this.Total = res.data.goods[0].foods.length; var arr = []; //限制获取数据量 for(var i=0;i{ console.log(err); }); }, methods:{ //下一页 xia(){ //页数++ if(this.pages == this.total){ this.pages = this.total; }else{ this.pages++; } //从 加载数据 下标+数量 this.num = (this.pages-1)*this.initial; this.sua(); }, //上一页 shan(){ if(this.pages == 1){ this.pages = 1; }else{ this.pages--; } this.num = (this.pages-1)*this.initial; this.sua(); }, //刷新数据 sua(){ axios.get("'../../static/mock/data.json").then(res=>{ var arr = []; //限制获取数据量 for(var i=0;i { console.log(err); }); }, //页数选择 yesu(e){ // console.log(e.target.id); this.num = (e.target.id)*4; this.pages = Number(e.target.id)+1; this.sua(); },
以上是“怎么使用vue实现分页加载效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享名称:怎么使用vue实现分页加载效果-创新互联
文章源于:http://pwwzsj.com/article/dodsoe.html