通过标签引入Vue2.0进行的分页

整理一下自己做出来的分页，也给大家分享一下！希望对需要的人可以帮到！
1.首先在html页面引入vue2.0.js
2.在html页面定义一个组件
    
其中用cur来判断是当前页是否是第一页，cur在后面的js代码中的默认值为1；
上一页
，如果cur为1的话，上一页的样式就为banclick,不能点击了！反之亦然！
上一页
，当触发点击上一页的事件时候，页码要跟着--。
indexs也是在js中定义好的，用户显示页码，且页码还有点击事件！

{{ index }} ，其中’indexs’是一个计算属性，在js代码中。
下一页和上一页的原理一样
下面到了每页的条数这个环节了，之前我找资料的时候，发现都是用v-cli打包好了的！
3.首先样式是一个问题，还有点击每页多少条的时候，要把当前页，每页的条数都传给后台。下面是js代码
new Vue({
el: ‘#page’,
data:{
users:”,
pages: 0, //总页数
present: 1,//当前页码
pageSize:10,//每页默认显示的页数
count:0
},
components:{
‘vue-nav’:{
template:’#pagintaion’,
props:[‘pages’,’cur’,’count’,’present’],
data:function(){
return{
curs:1,
pageSize:this.parent.pageSize,  
                 options:[  
                     {text:’10’,value:10},  
                     {text:’20’,value:20},  
                     {text:’50’,value:50},  
                     {text:’100’,value:100}  
                 ]  
                }  
            },  
            computed: {  
                indexs: function(){  
                  var left = 1;  
                  var right = this.pages;  
                  var ar = [];  
                  if(this.pages>= 5){  
                    if(this.cur > 3 && this.cur < this.pages-2){  
                            left = this.cur - 2  
                            right = this.cur + 2  
                    }else{  
                        if(this.cur<=3){  
                            left = 1  
                            right = 5  
                        }else{  
                            right = this.pages  
                            left = this.pages -4  
                        }  
                    }  
                 }  
                while (left <= right){  
                    ar.push(left)  
                    left ++  
                }  
                return ar  
               }  
            },  
            methods: {  
                btnclick: function(data){  
                    if(data != this.curs){  
                        this.curs = data;  
                        this.emit(‘btn-click’,data);
}
},
pageClick: function(){
this.emit(‘btn-click’,this.curs);  
                },  
                onSelected:function(event){  
                    this.pageSize = parseInt(event.target.value);  
                    this.parent.pageSize = this.pageSize;
this.$emit(‘btn-click’,this.curs);
this.curs=1;
}
}
},

},
 mounted:function(){
    this.listenDate(1);
},
methods:{
    listenDate:function(data){
        if(data == this.cur && data!=1) return;
        this.present = data;
        this.$http.post('findUserByPage',{'page':this.present,'pageSize':this.pageSize}).then((response)=>{
            console.log(response.data);
          console.log("Send Success:发送成功了");
          this.users = response.data.data.userList;
        this.pages = Math.ceil(response.data.data.userCount/this.pageSize);
        this.count = response.data.data.userCount;

        });
    },

    editBtn:function(){
        alert(1)
    }

}
})