Vue 實用分頁paging實例代碼

更新時間：2017年04月12日 08:27:26 作者：偏愛花開的聲音

本篇文章主要介紹了Vue 實用分頁paging實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

直接上代碼。只有一個小小的需要注意的點：vue1.x的v-for循環(huán)是從0開始，遵從了程序語言設(shè)計的一貫的做法，而vue2.x是從1開始的，符合我們平常的習(xí)慣。用下來還是vue2.x的做法方便一些，不需要繞一下子了。

//html
<div id="paging">
<span v-on:click="switchPage(curPage - 1)">prev</span>
<span v-for="item in sum" v-bind:class="{'current-page': item == curPage}" v-text="item" v-on:click="switchPage(item)"></span>
<span v-on:click="switchPage(curPage + 1)">next</span>
</div>

//js
var paging = new Vue({
 el: '#paging',
 data: {
  sum: 4, //總頁數(shù)
  curPage: 1, //當(dāng)前頁
 },
 methods: {
  getBooks: function(page){
   //頁面初始化函數(shù)
  },
  switchPage: function(page){
   var vm = this;
   if(page < 1) {
    page = 1;
   } else if(page > vm.sum) {
    page = vm.sum;
   }
   vm.getBooks(page);
   vm.curPage = page;
  },
 }
})

//css
span {
 display: inline-block;
 margin: 3px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 text-align: center;
 color: pink;
 background: #fff;
 border-radius: 5px;
}
span.current-page,
span:hover {
 color: #fff;
 background: pink;
}

效果如下：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
分頁

相關(guān)文章

vue3封裝輪播圖組件的方法
這篇文章主要為大家詳細(xì)介紹了vue3封裝輪播圖組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by current JavaScript version的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
微信小程序開發(fā)實現(xiàn)消息框彈出
在小程序的wxml文件中創(chuàng)建消息框,消息框一般包含要提示的消息內(nèi)容以及確認(rèn)和取消按鈕,在小程序的wxss文件中定義消息框的樣式,在小程序的js文件中,我們需要通過Animation對象實現(xiàn)消息框的彈出動畫
2023-12-12
vue自定義指令實現(xiàn)方法詳解
這篇文章主要介紹了vue自定義指令實現(xiàn)方法,結(jié)合實例形式分析了vue.js自定義指令相關(guān)定義、注冊、使用方法及操作注意事項,需要的朋友可以參考下
2019-02-02
ElementUI?Upload源碼組件上傳流程解析
這篇文章主要為大家介紹了ElementUI?Upload源碼組件上傳流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解)
這篇文章主要介紹了vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-01-01
vue路徑寫法之關(guān)于./和@/的區(qū)別
這篇文章主要介紹了vue路徑寫法之關(guān)于./和@/的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
老生常談vue2中watch的使用
watch的基本用法是在Vue實例中定義一個watch對象,該對象內(nèi)部包含需要監(jiān)聽的數(shù)據(jù)項和對應(yīng)的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下
2024-01-01
使用Vue自定義數(shù)字鍵盤組件(體驗度極好)
最近做 Vue 開發(fā)，因為有不少頁面涉及到金額輸入，產(chǎn)品老是覺得用原生的 input 進行金額輸入的話體驗很不好，于是自己動手寫了一個使用Vue自定義數(shù)字鍵盤組件，具體實現(xiàn)代碼大家參考下本文
2017-12-12
詳細(xì)聊聊前端如何實現(xiàn)token無感刷新(refresh_token)
實現(xiàn)token無感刷新對于前端來說是一項非常常用的技術(shù),其本質(zhì)是為了優(yōu)化用戶體驗,下面這篇文章主要給大家介紹了關(guān)于前端如何實現(xiàn)token無感刷新(refresh_token)的相關(guān)資料,需要的朋友可以參考下
2022-11-11