Vue实现点击按钮进行上下页切换 Vue实现点击按钮进行上下页切

本文实例为大家分享了Vue实现点击按钮进行上下页切换的具体代码，供大家参考，具体内容如下
案例效果：

文章图片

完整代码如下：

* {font-size: 14px; font-weight: normal; } #page {display: flex; width: 80%; margin: auto; .btn {width: 70px; height: 35px; color: white; font-weight: bold; border: 0; margin: 0 5px; } .btn:hover {cursor: pointer; } .btn:active {background-color: #787878; }} ul {list-style: none; /*未选中时的页码样式*/li, .page {float: left; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid lightskyblue; color: lightskyblue; margin: 0 3px; } /*选中后的页码样式*/.page1 {background-color: lightskyblue; color: white; }}

【Vue实现点击按钮进行上下页切换】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。