JSFiddle - React, Tailwind, and code Playground

by woaisluosj

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="vue-dingyi-paging">
        <ul>
            <li>
                <a class="pageLink" href="#" @click="setPage(curNum-1)">
                    <</a>
            </li>
            <li v-for="n in totalNum">
                <a class="pageLink" href="#" v-text="n+1" @click="setPage(n+1)" :class="{ curPage: n+1 == curNum }"></a>
            </li>
            <li><a class="pageLink" href="#" @click="setPage(curNum+1)">></a></li>
        </ul>
    </div>

CSS

* {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        #vue-dingyi-paging ul {
            list-style: none;
            margin-top: 10px;
        }

        #vue-dingyi-paging ul li {
            margin: 0 5px;
        }

        #vue-dingyi-paging ul li,
        .pageLink {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: #F0F0F0;
            color: #ABABAB;
            border-radius: 3px;
            text-align: center;
            text-decoration: none;
            line-height: 40px;
        }

        #vue-dingyi-paging ul li .pageLink:hover {
            background: #ABABAB;
            color: #FFFFFF;
        }

        #vue-dingyi-paging ul li .curPage {
            background: #81C06F;
            color: #FFFFFF;
        }

JavaScript

new Vue({
            el: '#vue-dingyi-paging',
            data: {
                totalNum: 6, //总页数
                curNum: 1 //当前页码
            },
            methods: {
                //切换页码
                setPage: function(num) {
                    //页码小于等于1
                    if (num <= 1) {
                        return this.curNum = 1;
                    }
                    //页码大于总页数
                    if (num >= this.totalNum) {
                        return this.curNum = this.totalNum;
                    }
                    //页码赋给当前页
                    this.curNum = num;
                }
            }
        })