本文主要介绍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页{

背景色：亮天蓝色；

颜色：白色；

}

}

/风格

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