上下翻页按钮,上一页 下一页 vue2,分页

发布时间 2023-06-09 18:07:30作者: 芹菜是一根葱

已经有每一页对应的数据,一共五页,点击到最后一页再点下一页按钮时回到第一页

 

        <div class="button-list">
          <button @click.prevent="handleLeft">
            <i class="el-icon-arrow-left"></i>
            {{ifchinese ? '上一页':'pre page'}}
          </button>
          <button @click.prevent="handleRight">
            {{ifchinese ? '下一页':'next page'}}
            <i class="el-icon-arrow-right"></i>
          </button>
        </div>

 

 1     //上一页
 2     handleLeft() {
 3       this.number -= 1
 4       if(this.number < 0) return this.number = 5
 5     },
 6     // 下一页
 7     handleRight() {
 8       this.number += 1
 9       if(this.number > 5) return this.number = 0
10     },