一.介紹

    本方法利用vue的父子元件實現分頁功能，UI來自bootstrap。實現效果是最大頁數小於五時全部顯示，分頁只顯示五個頁數，具體頁碼顯示範圍根據當前頁與最大頁數來變換。效果如下圖所示：

二.子元件部分

	Vue.component('page-divide',{
		props:['index','maxpage','curpage'],
		computed:{
			pagelist:function(){	//控制頁面顯示頁碼範圍的方法
					if(this.maxpage<5){
						return  this.index;
						}else{
							if(this.curpage-2<=0){
								return this.index;
							}else if(this.curpage+2>this.maxpage){
								 return this.maxpage+this.index-5;
							}else{
								return this.curpage+this.index-3;
							}
						}
			}
		},
		template:'<li v-bind:class="{active:curpage==pagelist}"><a  v-on:click="switchpage">{{pagelist}}</a></li>',
		methods:{         
			switchpage:function(){
				this.$emit('switchpage',this.pagelist);
			}
		}	
	});
 

二.父元件部分

    首先建立父元件的vm例項，

     父元件使用Dom元素作為模板：

<center>
	<div id="page" onselectstart="return false">
		<nav aligh="center" aria-lable="Page navigation">
			<ul align="center" id="pager" class="pagination">
				<li><a v-on:click="getData(currentpage-1)">上一頁</a></li>
				<page-divide @switchpage="getData" 
							 v-for="n in pagesize" 
							 :key="n.index" 
							 :index="n"
							 :maxpage="maxpage" 
							 :curpage="currentpage">
				</page-divide>
				<li><a @click="getData(currentpage+1)">下一頁</a></l>
			</ul>
		</nav>
	</div>
</center>
 

    vue例項:

var vmstand = new Vue({
		el:'#stand',
		data:{
			currentpage:currentpage,
			maxpage:0
		},computed:{
			pagesize:function(){
				return this.maxpage>5?5:this.maxpage;
			}
			},
		methods:{
			getData:function(page){
				this.currentpage=page;
				var _self=this;
				_self.flag=false;
				$.ajax({type:"POST",url:"staticInfoController/getPage.do",
					data : {'pageSize':1,'currentPage':page,'params':this.condition,'type':'basic.Standard'},async:false,
					dataType:"text",success:function(data) {
					data = eval("("+data+")");
					if(page<=data.maxPage&&page>0){
						_self.info =data.list;
						_self.maxpage=data.maxPage;
						_self.currentpage=page;
						_self.flag=true;
					}else if(page<=0){
						_self.getData(1);
					}else{
						_self.getData(page-1);
					}
					_self.$nextTick(function(){
						_self.initClickChecked();//業務需要方法，在dom載入結束後呼叫
					})
					}});
			}}})
 

     其中page-divide 就是定義的子元件。因為沒有引用vue-resource,所以直接通過ajax得到資料，注意vue的this在ajax裡面不能直接用，因為ajax裡的this指的是呼叫本次ajax請求時傳遞的options引數。 el中使用v-for進行迴圈，迴圈次數為pagesize。在父元件中設定index,maxpage,curpage三個屬性傳入子元件。當子元件觸發父元件switchpage方法時，父元件呼叫getData方法，重新獲得資料。