vue前端分页,vue后端分页
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单的分页功能的具体代码，供大家参考，具体内容如下
模板
div id=pages
div class=" pages "
key= index，index)
{{item}}
/div
div class= img 1 @ click= prev page()/div
div class= img 2 @ click= next page()/div
/div
/div
/模板
脚本
导出默认值{
data () {
返回{
totalPage: 1，//所有页数，默认为一
当前页面：1,//当前页数，默认为一
页面大小：9,//每页显示条数
classInfo: [11，12，13，14，15，16，17，18，19，1，2，3，4，5，6，5，6，11，7，8，9，5，4，5，4，5，4，5，5，4，5]，//页面数据
当前页面数据：[] //当前页显示内容
}
},
已安装(){
//计算一共有几页
这个。总页数=数学。ceil(这个。课程信息。长度/这个。页面大小)
//计算得0时设置为一
这个。总页数=这个。总页数==0？1:this.totalPage
这个。setcurrentpagedata()；
},
方法：{
//设置当前页面数据
setCurrentPageData(){
让我们开始吧。当前页-1)*此。页面大小；
让结束=这个。当前页面*这。页面大小；
//console.log(begin)
//console.log(end)
这个。当前页面数据=this。课程信息。切片(
开始，
目标
)
//控制台。日志(这个。currentpagedata)
},
//上一页
prevPage(){
//console.log(this.currentPage)
if(this.curentPage==1)返回
这个。当前页面-；
这个。setcurrentpagedata()；
},
//下一页
nextPage(){
//console.log(this.currentPage)
如果(这个。当前页面==this。总页数)返回
这个。当前页面
this.setCurrentPageData()
}
}
}
/脚本
style lang=less 范围
页数{
//背景色：# fff。页数{
边距：0自动；
宽度：600像素
高度：600像素
//背景色：rgb(64，180，80)；
z指数：999;classInfo{
字体大小：25px
颜色：aliceblue
z指数：999;
}。img1{
宽度：150像素
高度：50px
背景色：rgb(189，111，111)；
}。img2{
宽度：150像素
高度：50px
背景色：rgb(41，94，110)；
}
}
}
/风格
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。