分页组件

html代码

 <div id="app">
        <page :activeindex="activeindex" :count="20" :pagesize="3" @change="cha"></page>
    </div>

css代码

  * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        li {
            width: 30px;
            height: 30px;
            font-size: 20px;
            color: red;
            border: 1px solid red;
            margin-left: 10px;
            text-align: center;
        }
        
        .active {
            background: red;
            color: #fff;
            cursor: pointer;
        }

js代码

 Vue.component("page", {
        template: `
        <ul>
            <li v-for="(item,i) in totolpage" :class="{active:pageindex===item}" @click="cli(item)" >{{item}}</li>
        </ul>
        `,
        props: ['activeindex', 'count', 'pagesize'],
        data() {
            return {
                totolpage: 0,
                pageindex: 0
            }
        },
        created() {
            this.totolpage = Math.ceil(this.count / this.pagesize)
            this.pageindex = this.activeindex
        },
        methods: {
            cli(i) {
                this.pageindex = i
                this.$emit("change", this.pageindex)
                
            }
        },
    })
    new Vue({
        el: '#app',
        data() {
            return {
                activeindex:4
            }
        },
        methods: {
            cha(e) {
                console.log(e);
            }
        },
    });