快捷導(dǎo)航

Vue 實(shí)用分頁(yè)paging實(shí)例代碼

更新時(shí)間：2017年04月12日 08:27:26 作者：偏愛(ài)花開(kāi)的聲音

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

直接上代碼。只有一個(gè)小小的需要注意的點(diǎn)：vue1.x的v-for循環(huán)是從0開(kāi)始，遵從了程序語(yǔ)言設(shè)計(jì)的一貫的做法，而vue2.x是從1開(kāi)始的，符合我們平常的習(xí)慣。用下來(lái)還是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, //總頁(yè)數(shù)
  curPage: 1, //當(dāng)前頁(yè)
 },
 methods: {
  getBooks: function(page){
   //頁(yè)面初始化函數(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;
}

效果如下：

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

您可能感興趣的文章:

相關(guān)文章

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