直接上代碼。只有一個小小的需要注意的點：vue1.x的v-for循環是從0開始，遵從了程序語言設計的一貫的做法，而vue2.x是從1開始的，符合我們平常的習慣。用下來還是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>//jsvar paging = new Vue({ el: '#paging', data: { sum: 4, //總頁數 curPage: 1, //當前頁 }, methods: { getBooks: function(page){ //頁面初始化函數 }, 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; }, }})//cssspan { 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;}效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
