vue 分页

分页效果实现

在这里插入图片描述
思路:
1.每页显示的数量
2.当前页数
3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .pagination {
            margin: 20px 0;
        }
        .pagination a {
            padding: 5px 15px;
            border: 1px solid yellowgreen;
            text-decoration: none;
            margin: 5px;
        }
        /* 点按钮变色 这里只是提前写好样式 如果为true在会变色 */
        .pagination a.active {
           background : #3ba9ff;
           color: white;
        }
    </style> 

</head>
<body>
    <div id="app">
        <ul>
            <li v-for="user in newUser":key="user.id">
                {{user.name}}
            </li>        
        </ul>
            
        <!--         这里绑定总页数                  父组件传过来参数 复用件接收后判断如果为true执行css样式  --> 
        <p-pagination :pages=showUsers @click-pag="fn" :page = 'uPage'> </p-pagination> 
                         
    </div>
    <script>
        Vue.component("p-pagination",{
            template: `
                        <div class="pagination">    
                            <a href="javascript:;" @click='deduction'>上一页</a>  

                            <a href="javascript:;" v-for="pag in pages" @click="goto(pag)"                         
                            :class="{active: pag === page}"
                            >{{pag}}</a>

                            <a href="javascript:;" @click='score'>下一页</a>   
                        </div>                                           
                      `,
            props:['pages','page'],//接收参数 
            methods: {
                goto(pag){            //点击按钮给父组件传参  这里的参数也可以直接使用pag
                    this.$emit("click-pag",pag);
                    // console.log(this.pages);
                    console.log(this.page)        
                },
                // 上一页
                deduction(){
                    if(this.page - 1 >0){             
                        this.$emit("click-pag",this.page-1);
                     }else{
                        this.page = 1
                     }                      
                },  
                // 下一页
                score(){  //若果是最后一页 
                    if(this.page >= this.pages ){    
                        this.page = this.pages            
                    }else{
                        this.$emit("click-pag",this.page+1);  
                    }   
                },
            }
        });
        let app = new Vue({
            el:"#app",
            data:{
                users:[
                    {id:1,name:'小王'},
                    {id:2,name:'小红'},
                    {id:3,name:'小明'},
                    {id:4,name:'小丽'},
                    {id:5,name:'小东'},
                    {id:6,name:'小花'},
                    {id:7,name:'小李'},  
                                   
                ],
                uPage:1, //当前页
                perPage:2, //每页显示多少条
                
            },
            computed: {
                // 获取总页数 
                showUsers:{  
                    get(){
                        return Math.ceil(this.users.length / this.perPage); 
                    }
                },
                newUser:{ //渲染到页面
                    get(){ // 分割数据
                        return JSON.parse(JSON.stringify(this.users)).splice((this.uPage-1)*this.perPage , this.perPage)
                    }
                },
            },

            methods: {
                fn(n){
                    // console.log(n)
                    this.uPage = n;  //接收到 子组件传过来的数据 修改data的显示
                },
         
             },             
        });
    </script>
</body>
</html>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值