基于vue.js的分页

之前的CSDN编译器有点问题。所以这里重新整理给大家。

本文主要介绍基于vue的分页原生写法。

先po上效果图：

html部分，将page作为一个单独的组件

    <script type="text/x-template" id="page">
        <ul class="pagination">
            <li v-show="current != 1" @click="current-- && goto(current)">
                <a href="#">上一页</a>
            </li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
                <a href="#">{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
                <a href="#">下一页</a>
            </li>
        </ul>
    </script>
    <div id="app">
        <page></page>
    </div>

js部分：

    <script>
        Vue.component("page", {
            template: "#page",
            data: function () {
                return {
                    current: 1, // 当前页码
                    showItem: 5, // 最少显示5个页码
                    allpage: 13 // 总共的
                }
            },
            computed: {
                pages: function () {
                    var pag = [];
                    if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
                        //总页数和要显示的条数那个大就显示多少条
                        var i = Math.min(this.showItem, this.allpage);
                        while (i) {
                            pag.unshift(i--);
                        }
                    } else { //当前页数大于显示页数了
                        var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
                            i = this.showItem;
                        if (middle > (this.allpage - this.showItem)) {
                            middle = (this.allpage - this.showItem) + 1
                        }
                        while (i--) {
                            pag.push(middle++);
                        }
                    }
                    return pag
                }
            },
            methods: {
                goto: function (index) {
                    if (index == this.current) return;
                    this.current = index;
                    //这里可以发送ajax请求
                }
            }
        })

        var vm = new Vue({
            el: '#app',
        })
    </script>

css部分：

        body {
            font-family: "Segoe UI";
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .pagination {
            position: relative;
        }

        .pagination li {
            display: inline-block;
            margin: 0 5px;
        }

        .pagination li a {
            padding: .5rem 1rem;
            display: inline-block;
            border: 1px solid #ddd;
            background: #fff;

            color: #0E90D2;
        }

        .pagination li a:hover {
            background: #eee;
        }

        .pagination li.active a {
            background: #0E90D2;
            color: #fff;
        }

最后附上github地址：https://github.com/AmberWuWu/vue-page