效果如上圖，第一頁顯示5行數據

HTML代碼如下

<footer class="col-sm-12 footerbox navbar-fixed-bottom"><div class="row"><div class="col-sm-12"><a class="btn btn-default" href="#" role="button">首頁</a><a class="btn btn-default" href="#" role="button"><</a><!--<a v-for="(item,i) in pager" @click="toPager(i)" :class="['btn','btn-default',{active:item.status}]" role="button">{{item.id}}</a>--><a v-for="(item,i) in pager" @click="toPager(i)" class="btn btn-default" role="button">{{item.id}}</a><a class="btn btn-default" href="#" role="button">></a><a class="btn btn-default" href="#" role="button" @click="toLast">尾頁</a></div></div></div></footer>

?關鍵點在有v-for的那一行

pager是我在JS里面定義的，如下

var vue = new Vue({el: '.App',data: {adminMessageList: [{ ainNickname: 1, ainCreateTime: "高級效果圖", number: 1 }, { ainNickname: 2, ainCreateTime: "中級效果圖", number: 1 }, { ainNickname: 3, ainCreateTime: "一般效果圖", number: 1 }],ddelAdminList:[],pager:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],},created: function () {this.adminMessageList = this.getAdminMessage();},methods: {getAdminMessage() {var AdminMessageResult;$.ajax({type: "get",async: false, // 同步 一定會等數據返回data: {currentPage:"1",pageSize:"5"},url: "http://127.0.0.1:8088/admin/getAdminMessage",success(res) {AdminMessageResult = res;},error(res) {}})return AdminMessageResult;},deleteSingle(i){let that = this;$.ajax({type: "get",async: true, // 同步 一定會等數據返回data: {ainNickname:this.adminMessageList[i].ainNickname,},url: "http://127.0.0.1:8088/admin/delete",success(res) {that.adminMessageList = res;},error(res) {}})},addadmin(){var admin = [{"ainAdminIdCd":"2021-08-16 16:33:15","ainId":2,"ainNickname":"admin","ainPhone":"18173350047","ainEmail":"1349578685@qq.com","ainCreateTime":"2021-08-16 16:33:15"}]this.adminMessageList.push(admin)},toPager(i){let that = this;alert(i+1)// this.pager[i].status = true;$.ajax({type: "get",async: true, // 同步 一定會等數據返回data: {currentPage:(i+1),pageSize:"5"},url: "http://127.0.0.1:8088/admin/getAdminMessage",success(res) {that.adminMessageList = res;},error(res) {}})},toLast(){console.log ()alert(this.pager.length)} } } )

?關鍵我用截圖展示

這里用來顯示1.2.3.4.5.6頁

在v-for那一行還有一個方法toPager(i)，截圖給大家看一下

?

先嘗試一下alert(i+1)看能不能讀取到你是點擊的第一個，沒問題了之后，就發送AJAX

傳數據當前頁和一頁顯示5個

回顯的時候請注意紅色框框內的，要用that，我也不知道為什么，反正用就對了

給大家展示一下后端接口

/*** 分頁查詢管理員信息* @return*/@ResponseBody@GetMapping("admin/getAdminMessage")public List<AdminInfo> getAdminMessage(@Param("param1")String currentPage, @Param("param2")String pageSize){int currentPagenum = Integer.parseInt(currentPage);int pageSizenum = Integer.parseInt(pageSize);List<AdminInfo> selectForPage = adminService.selectForPage((currentPagenum-1)*pageSizenum, pageSizenum);for (AdminInfo adminInfo : selectForPage) {System.out.println(adminInfo);}return selectForPage;}

?mapper也提供給大家

<select id="selectForPage" resultMap="adminInfoMapper">select * from admin_info limit #{param1},#{param2}</select>

瀏覽器訪問，就OK了，實現前端用戶點擊分頁盒子后端進行物理分頁啦！且前端用了VUE能夠實時刷新

總結

以上是生活随笔為你收集整理的使用vue实现分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。