vue点击按钮跳转页面,vue上下滑动切换页面

　　本文主要介绍Vue实现点击按钮进行上下页切换。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享Vue点击按钮切换上下页的具体代码，供大家参考。具体内容如下

　　案例效应：

　　完整的代码如下：

　　模板

　　div id=page

　　button class= BTN @ click= Prepage()上一页/button

　　保险商实验所

　　李：选择==索引？page1:page v-for=(item，index)of page count :key= index { { item } }/Li

　　/ul

　　button class= BTN @ click= Next page()下一页/button

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　Page: 10，//总页数

　　Selected: 0 //选中的页面，默认起始页是第一页。

　　//因为是和下标index比较，所以要从0开始；0表示第一页，依此类推。

　　}

　　},

　　方法：{

　　//上一页

　　prePage() {

　　//如果已经在第一页，点击页码不变的按钮，会弹出提示。

　　if (this.selected==0) {

　　this.selected

　　Alert(已经是第一页了！);

　　//否则当前页数-1

　　}否则{

　　this . selected=this . selected-1；

　　}

　　},

　　//下一页

　　nextPage() {

　　//如果已经在最后一页了，点击页码不变的按钮，会弹出提示。

　　if(this . selected==this . page count-1){

　　this.selected

　　Alert(这是最后一页！);

　　}否则{

　　//否则，当前页码为1

　　this . selected=this . selected 1；

　　}

　　}

　　}

　　}

　　/脚本

　　样式范围语言=less

　　* {

　　字体大小：14px

　　字体粗细：正常；

　　}

　　#page {

　　显示器：flex

　　宽度：80%；

　　边距：自动；btn {

　　宽度：70px

　　高度：35px

　　颜色：白色；

　　字体粗细：粗体；

　　边框：0；

　　保证金：0 5px

　　}。btn:悬停{

　　光标：指针；

　　}。btn:活动{

　　背景色：# 787878；

　　}

　　}

　　ul {

　　列表样式：无；

　　/*未选中时的页码样式*/

　　李。页面{

　　浮动：左；

　　宽度：35px

　　高度：35px

　　文本对齐：居中；

　　行高：35px

　　边框：1px纯亮天蓝色；

　　颜色：亮天蓝色；

　　保证金：0 3px

　　}

　　/*选择后的页码样式*/

　　.第1页{

　　背景色：亮天蓝色；

　　颜色：白色；

　　}

　　}

　　/风格

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。