Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。
分頁一般和表格一起用，分頁鏈接作為表格的一部分，將分頁鏈接封裝成一個獨立的組件，然后作為子組件嵌入到表格組件中，這樣比較合理。
1.注冊一個組件
js
Vue.component('pagination',{template:'#paginationTpl',replace:true,props:['cur','all','pageNum'],methods:{//頁碼點擊事件btnClick: function(index){if(index != this.cur){this.cur = index}}},watch:{"cur" : function(val,oldVal) {this.$dispatch('page-to', val)}},computed:{indexes : function(){var list = []//計算左右頁碼var mid = parseInt(this.pageNum / 2);//中間值var left = this.cur - mid;var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);if (left < 1) {left = 1}if (right > this.all ) { right = this.all}while (left <= right){list.push(left)left ++}return list;},showLast: function(){if(this.cur == this.all){return false}return true},showFirst: function(){if(this.cur == 1){return false}return true}}});模板：
<script type="text/template" id="paginationTpl"><nav v-if="all > 1"><ul class="pagination"><li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li><li v-for="index in indexes" :class="{ 'active': cur == index}"><a @click="btnClick(index)" href="javascript:">{{ index }}</a></li><li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li><li><a>共<i>{{all}}</i>頁</a></li></ul></nav></script>HTML：
<div id='parentEle'>...<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination></div>
當點擊分頁鏈接的時候，會觸發
page-to
事件，而我們在html標簽中指定了使用父組件
loadList
方法處理事件，我們只要在組件中把當前頁碼傳給父組件即可，父組件負責ajax加載數據，并更新自身的 pageAll 值。
新聞熱點
疑難解答
圖片精選
