Vue分页简单功能的实现

最新推荐文章于 2023-08-17 12:36:15 发布

chenronglong20

最新推荐文章于 2023-08-17 12:36:15 发布

阅读量510

点赞数 1

文章标签： css javascript vue.js html

本文链接：https://blog.csdn.net/chenronglong20/article/details/104556192

版权

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>