本文主要介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。