用Vue2.0实现简单的分页及跳转

 用Vue2.0实现一个数据的分页及页数的跳转，代码如下：

• 数据绑定：{{...}}        {{item}}
• 事件绑定：v-on        上一页
• 判断：v-if                
• 上一页
• 循环：v-for             
• 修改样式：v-bind绑定class属性       

HTML代码如下：

	




  

    

      上一页
    
    

      上一页
    
    

      {{item}}
    
    

      下一页
    
    

      下一页
    
    
共{{all}}页
    

		
		跳转
	
  

js代码如下：

 new Vue({
	el: '#page-break',
	data: {
		cur: 1,
		all: 20
	},
	watch: {
		cur: function(newValue, oldValue){
			console.log(arguments);
		}
	},
	methods: {
		btnClick(num){
			if(num!=this.cur){
				this.cur=num;
			}
		},
		pageClick(){
			console.log('现在是'+this.cur+'页')
		},
		pageSkip(){
			var maxPage = this.all;
			var skipPage = Number(document.getElementsByClassName("jumppage")[0].value);
			console.log(typeof skipPage);
			if(!skipPage){
				alert("请输入跳转页码");
				return;
			}else if(skipPage<1 || skipPage>maxPage){
				alert("您输入的页码超过页数范围了！");
				return;
			}else{
				//this.cur=skipPage;
				this.btnClick(skipPage);
				this.pageClick();
			}
		}
	},
	computed: {
		indexs(){
			var left = 1;
			var right = this.all;
			var arr = [];
			if(this.all>=7){
				if(this.cur>4 && this.cur

分页显示如下：