怎么使用vue實現(xiàn)分頁加載效果-創(chuàng)新互聯(lián)

js

data(){
 return{
 data:"",//頁面數(shù)據(jù)
 num:0,
 pages:1,//當前頁數(shù)
 priceQuery:false,//價格排序判斷
 Total:"",//總頁數(shù)（向上取整）
 initial:4,//默認加載數(shù)量
 total:"",//最終頁數(shù)
 }
 },
 created(){
 //獲取初始數(shù)據(jù)
 axios.get("'../../static/mock/data.json").then(res=>{
 this.Total = res.data.goods[0].foods.length;
 var arr = [];
 //限制獲取數(shù)據(jù)量
 for(var i=0;i{
 console.log(err);
 }); 
 },
 methods:{
 //下一頁
 xia(){
 //頁數(shù)++
 if(this.pages == this.total){
  this.pages = this.total;
 }else{
  this.pages++;
 }
 //從 加載數(shù)據(jù) 下標+數(shù)量
 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();
 },
 //刷新數(shù)據(jù)
 sua(){
 axios.get("'../../static/mock/data.json").then(res=>{
 var arr = [];
 //限制獲取數(shù)據(jù)量
 for(var i=0;i{
 console.log(err);
 }); 
 },
 //頁數(shù)選擇
 yesu(e){
// console.log(e.target.id);
 this.num = (e.target.id)*4;
 this.pages = Number(e.target.id)+1;
 this.sua();
 },

以上是“怎么使用vue實現(xiàn)分頁加載效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！