效果如上圖，第一頁(yè)顯示5行數(shù)據(jù)

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">首頁(yè)</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">尾頁(yè)</a></div></div></div></footer>

?關(guān)鍵點(diǎn)在有v-for的那一行

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

var vue = new Vue({el: '.App',data: {adminMessageList: [{ ainNickname: 1, ainCreateTime: "高級(jí)效果圖", number: 1 }, { ainNickname: 2, ainCreateTime: "中級(jí)效果圖", 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, // 同步 一定會(huì)等數(shù)據(jù)返回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, // 同步 一定會(huì)等數(shù)據(jù)返回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, // 同步 一定會(huì)等數(shù)據(jù)返回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)} } } )

?關(guān)鍵我用截圖展示

這里用來(lái)顯示1.2.3.4.5.6頁(yè)

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

?

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

傳數(shù)據(jù)當(dāng)前頁(yè)和一頁(yè)顯示5個(gè)

回顯的時(shí)候請(qǐng)注意紅色框框內(nèi)的，要用that，我也不知道為什么，反正用就對(duì)了

給大家展示一下后端接口

/*** 分頁(yè)查詢管理員信息* @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了，實(shí)現(xiàn)前端用戶點(diǎn)擊分頁(yè)盒子后端進(jìn)行物理分頁(yè)啦！且前端用了VUE能夠?qū)崟r(shí)刷新

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。