vue实现分页组件

本文实例为大家分享了某视频剪辑软件实现分页组件的具体代码，供大家参考，具体内容如下

模板“页面框”ul Li v-if=“这。条件。第一页这个。页面。长度4 ' class=' sides ' a @ click=' prepage()' s class='font_main'/s/a/li Li v-for='(项目，索引)在page ' : class=' { ' curt page ' :条件。页码=' item } ' a v-if=' item ' @ click=' gopage(item)' s { { item } }/s/a href=' JAVAScript 333366 rel=' external no follow ' v-else./a/Li Li class=' sides ' v-if='条件。没有页数这个。页数4“a @ click=”下一页()”的class='font_main'/s/a/li/ul/div/templatejs中代码页和情况是由父组件中传过来的参数

脚本导出默认值{ props: { page: Object，condition: Object }，data(){ return { page size : this。条件。页面大小} }，计算出： {页数：函数(){返回此。佩奇。总数/这个。条件。页面大小0？这个。佩奇。总计数% this。条件。页面大小===0？这个。佩奇。总数/这个。条件。页面大小：数学。天花板(这个。佩奇。总数/这个。条件。页面大小): 1 }，pages(){让c=this。条件。页码让t=this.pageCount让arr=[]if(t===1){ return arr } if(t=4){ for(let I=1；I=t；我){ arr。push(I)} return arr } if(c=3)return[1，2，3，0，t] if (c=t - 1) return [1，0，t - 2，t - 1，t]//if (c===4) return [1，2，3，4，5，0，t]//if (c===(t - 2)) return [1，0，t - 3，t - 2，t - 1，t] return [1，0，c - 1，c，c 1，c==this。条件。页码){这个。条件。页码=本页索引.$emit('search') } }，prePage(){ if(this。条件。第几页！==1){这个。条件。第一页-这个。地鼠(这个。条件。页码)}，下一页(){ if(this。条件。第几页！==这个。页数){这个。条件。不，这一页。地鼠(这个。条件。页码)} } } }/脚本效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。