Vue分页简单功能的实现

我会带着你远行 2023-07-09 08:26 5阅读 0赞

## Vue分页简单功能的实现 ##

### 这种方式适合数据量不是很大的页面分页 ###

## 上代码： ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            ul{ 
                margin: 0 auto;
                list-style: none;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 100px;
                width: 380px;
                height: 250px;
                border: 1px solid rgb(109, 169, 184);
                border-radius: 5px;
                padding-bottom: 10px;
                padding: 0px;
            }
            li{ 
                width: 200px;
                height: 35px;
                line-height: 35px;
                border-left: 3px solid rgb(230, 38, 25);
                background-color: rgb(6, 111, 231);
                margin-top: 10px;
                color: white;
                padding-left: 10px;
            }
            dl { 
                overflow: hidden;
                display: flex;
                justify-content: center;
            }
            
            dd { 
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(151, 149, 149);
                margin-left: 15px;
                color: white;
                font-size: 14px;
                border-radius: 3px;
                border: 2px soli #cccccc;
                cursor: pointer;
            }
            dd:first-of-type,
            dd:last-of-type{ 
                width: 60px;
            }
            dd:hover { 
                background-color: rgba(37, 37, 37, 0.795);
                color: white;
                border: 2px soli #3f1717;
            }
            .active{ 
                background-color: rgb(37, 37, 37);
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <ul>
                <li v-for="item in show_page">{ { item}}</li>
            </ul>
            <dl>
                <dd @click="prev_page">上一页</dd>
                <dd :class="{active:(index+1)==current_page}" @click="choice(index)" v-for="item,index in total_page">{ { item}}</dd>
                <dd @click="next_page">下一页</dd>
            </dl>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({ 
                el: "#app",
                data: { 
                    //定义变量 
                    // 模拟从后台接收的数据
                    arr: [1,2,3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,21],
                    //需要展示的数据
                    show_page:[],
                    //分页数 每一页需要放置五条数据
                    page_num:5,
                    //总的页数 默认为0
                    total_page:0,
                    //默认当前页数为1 
                    current_page:1
                },
                methods: { 
                    init(){ 
                        //计算总的页数 当计算出的总页数为小数时，用Math.ceil()方法往正方向取整
                        this.total_page=Math.ceil(this.arr.length/5);
                        //当前第一显示的数据 注意slice和splice的使用方法哦 slice不会改变原数组 splice会改变原数组
                        this.show_page=this.arr.slice(0,this.page_num)
                    },
                    //上一页
                    prev_page(){ 
                        if(this.current_page==1){ 
                            return
                        }
                        //先--再运行
                        --this.current_page
                        // 当前页数第一页时，slice(第一个参数，第二个参数)第一个参数为每页开始数据的索引，第二个参数为每页结束数据的索引
                        this.show_page=this.arr.slice(this.page_num*(this.current_page-1),this.page_num*this.current_page)
                    },
                    //下一页
                    next_page(){ 
                        if(this.current_page==this.total_page){ 
                            return
                        }
                        //先++ 再运行
                        ++this.current_page
                        this.show_page=this.arr.slice(this.page_num*(this.current_page-1),this.page_num*this.current_page)
                    },
                    //选择页数，把索引传递进来
                    choice(index){ 
                        // 这个时控制页码类的选中样式，通过传参方式，因为索引从0开始，所以+1，就从1开始
                        this.current_page=index+1
                        this.show_page=this.arr.slice(this.page_num*(index),this.page_num*(index+1))
                    }
                },
                //当页面加载完执行的函数
                mounted:function(){ 
                    this.init()
                }
            });
        </script>
    </body>
    
    </html>