vue分页，87行代码完美实现，长得帅的都已经转载了，丑的还在犹豫

本文链接：https://blog.csdn.net/zsion409540923/article/details/78415332

当你看到这篇文章的时候，我已经假设你对VUE有了一定的了解！

上源码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
ul,li{margin: 0px;padding: 0px;list-style: none;}
.pager{margin:10px;}
.pager li:first-child>a {margin-left: 0px;}
.pager a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;cursor: pointer;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    user-select:none;
}
.pager a:hover{background-color: #eee;}
.pager a.banclick{cursor:not-allowed;}
.pager .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
.pager i{font-style:normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
</style>
</head>
<body>
<div class="pager">
    <ul>
        <li v-if="current>1"><a v-on:click="current--,pageClick()">上一页</a></li>
        <li v-if="current==1"><a class="banclick">上一页</a></li>
        <li v-for="index in indexs"  v-bind:class="{ 'active': current == index}">
            <a v-on:click="btnClick(index)">{{ index }}</a>
        </li>
        <li v-if="current!=allpage"><a v-on:click="current++,pageClick()">下一页</a></li>
        <li v-if="current == allpage"><a class="banclick">下一页</a></li>
        <li><a>共<i>{{allpage}}</i>页</a></li>
    </ul>
</div>
<script type="text/javascript">
var pageBar = new Vue({
    el: '.pager',
    data: {
        allpage: 20,    //总页数
        current: 1      //当前页码
    },
    watch: {
        current: function(oldValue , newValue){
            console.log(arguments);//打印节点信息
        }
    },    
    methods: {
        btnClick: function(data){//页码点击事件
            if(data != this.current){
                this.current = data //重写,点哪个选中哪个
            }
        },
        pageClick: function(){
            console.log('现在在'+this.current+'页');//打印当前是第几页
        }
    },
    computed: {
        indexs: function(){
			var left = 1;//设定左为1
			var right = this.allpage;//右为全部页数
			var array = [];//定义一个数组,用来循环输出
			if(this.allpage>= 5){//如果页数大于等于5的时候,保证中间显示5个
				if(this.current > 3 && this.current < this.allpage-2){//大于5个的情况
					left = this.current - 2    //左边-2
					right = this.current + 2   //右边+2
				}else{
					if(this.current<=3){//等于5个的情况
						left = 1
						right = 5
					}else{//中间已经不够显示5个的情况
						right = this.allpage
						left = this.allpage -4
					}
				}
			}
			while (left <= right){//循环出数组
				array.push(left)
				left ++
			}
			return array //返回数组
        }
    }
})
</script>
</body>
</html>

自己看吧，都有注释,看不明白，留评论！