vue实现分页加载效果

前端  /  管理员 发布于 2020-03-08 13:33:16   26

本文实例为大家分享了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.js实现无限加载与分页功能开发
• Javascript vue.js表格分页，ajax异步加载数据
• vue.js 表格分页ajax 异步加载数据