Vue 實(shí)用分頁paging實(shí)例代碼
更新時(shí)間：2017年04月12日 08:27:26 作者：偏愛花開的聲音
本篇文章主要介紹了Vue 實(shí)用分頁paging實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
直接上代碼。只有一個(gè)小小的需要注意的點(diǎn)：vue1.x的v-for循環(huán)是從0開始，遵從了程序語言設(shè)計(jì)的一貫的做法，而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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了15 分鐘掌握vue-next響應(yīng)式原理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了利用report分析vue項(xiàng)目中各文件大小問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue 彈框產(chǎn)生的滾動(dòng)穿透問題的解決
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動(dòng)穿透問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Vue監(jiān)聽使用方法和過濾器實(shí)現(xiàn)
這篇文章主要介紹了Vue監(jiān)聽使用方法和過濾器實(shí)現(xiàn)，過濾器為頁面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過濾器和全局過濾器2022-06-06
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue的路由及路由鉤子函數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue的路由及路由鉤子函數(shù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue 實(shí)現(xiàn)簡易多行滾動(dòng)"彈幕"效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)簡易多行滾動(dòng)“彈幕”效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
在Vue.js開發(fā)中,經(jīng)常會(huì)遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開發(fā)效率,我們可以封裝一個(gè)可配置的搜索列表組件,下面我們就來講講如何實(shí)現(xiàn)這樣一個(gè)組件吧2023-08-08