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

来源：互联网发布：泰国mac口红便宜吗编辑：程序博客网时间：2024/04/29 17:47

当你看到这篇文章的时候，我已经假设你对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;//设定左为1var 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    //左边-2right = this.current + 2   //右边+2}else{if(this.current<=3){//等于5个的情况left = 1right = 5}else{//中间已经不够显示5个的情况right = this.allpageleft = this.allpage -4}}}while (left <= right){//循环出数组array.push(left)left ++}return array //返回数组        }    }})</script></body></html>

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

阅读全文

0 0