Vue写简单的分页组件小案例

1.页面中那些元素是写死的，那些是通过Vue渲染上去的

        Vue渲染：页面中的列表数据，一共有几页，当前第几页，和1，2，3，4

        写死的：上一页 和 下一页

2.需求是什么

        1.每一页显示三个数据

        2.点击那一页显示当前页面的数据

        3.点击上一页和下一页时切换到对应页面

        4.知道当前是第几页

布局样式：

<div id="app">
        <ul>
            <li></li>
        </ul>
        <a href="#">下一页</a>
        <span class="pp"></span>
        <a href="">上一页</a>
        <span>一共有页，当前是第页</span>
    </div>

 <style>
        #app a{
            border: 1px solid blueviolet;
            text-align: center;
            width: 60px;
            line-height: 60px;
            text-decoration: none;
        }
        #app>.pp{
            display: inline-block;
            width: 30px;
            text-align: center;
            border: 1px solid gray;
            margin: 0 10px;
            cursor: pointer;
        }
    </style>

 在vm实例的data数据中心写上一些数据

data:{
                // 要渲染的数据，暂且写十条
                list:[
                    {id:1,name:"香蕉"},
                    {id:2,name:"西瓜"},
                    {id:3,name:"桔子"},
                    {id:4,name:"番茄"},
                    {id:5,name:"黄瓜"},
                    {id:6,name:"草莓"},
                    {id:7,name:"菠萝"},
                    {id:8,name:"红薯"},
                    {id:9,name:"苹果"},
                    {id:10,name:"土豆"}
                ],
                // 每页要显示几条数据
                num:3,
                // 第一页
                page:1
            },

1.在计算属性computed计算出一共有几页

computed:{
                pages(){//1. 动态计算出一共有几页
       // 已经知到的是每页有三条数据，拿数组长度除每页的数据(注意向上取整)，得到的就是具体有几页
                    let pages = Math.ceil(this.list.length/this.num);
                    return pages
                }
            }

在页面中渲染

 <span>一共有{{pages}}页，当前是第{{page}}页</span>

2.在计算属性中计算出每一页的按钮

 pagesnum(){
                    let pagesnum = [];// 声明一个空数组
                    // 在遍历的过程中往数组中添加数据，页面是从第一页开始显示，所以i=1
                    // 数组总长度不能大于最大页数
                    for(let i = 1; i<=this.pages; i++){
                        // 遍历时往数组中添加
                        pagesnum.push(i)
                    }
                    return pagesnum
                }

 <!-- 2.使用v-for在页面上渲染出来 -->
        <span class="pp" v-for="item in pagesnum">{{item}}</span>

3.使用计算属性，计算出每页要渲染的数据

 listnum(){// 3.让每一页显示三条数据
                    // 定义一个索引为，当前页面的索引
                    let listnum = (this.page-1)*this.num
                     // 截取数组，从当前索引开始截取三个数据
                    let re = this.list.slice(listnum,listnum+this.num)
                    return re
                }

在li元素中渲染出来：

<ul>
            <!-- 3.v-for接收计算属性返回的数据，每一页显示三条数据 -->
            <li v-for="item in listnum">{{item.name}}</li>
        </ul>

 4.在方法中心写出点击那一页显示当前页面数据的方法

                                         <!-- 形参，传入item，item为页数 -->
        <span class="pp" v-for="item in pagesnum" @click="add(item)">{{item}}</span>

         // 接收item
                add(item){ // 4.点击页数显示当前页数的数据
                    // 让页数等于你点击的item，也就是你点击的页数
                    this.page = item;
                },

这时候已经可以点击切换了：

 5.上一页和下一页

next(){ //5. 下一页
                    // 当当前页数小于4的时候，让当前页数加一
                    if(this.page<4){//注意这里不能等于4
                        this.page++
                    }
                },
                prev(){//6.上一页
                    // 当当前页数大于1的时候，让当前页数减一
                    if(this.page>1){//注意这里不能等于1
                        this.page--
                    }
                }

<!-- 5.点击下一页 -->
        <a href="#" @click="next">下一页</a>
<!-- 6.点击上一页 -->
        <a href="#" @click="prev()">上一页</a>

 

标签：Vue,分页,item,一页,组件,页面,数据,id,name
来源： https://blog.csdn.net/lolhuxiaotian/article/details/121816534