vue 分页显示 | vue分頁
老规矩,先说下我实现的思路我是用v-for遍历一个json数组,展示里面的数据因为数据太多,页面切换时会卡顿,所以要分页我这分页实现模式并不是用ajax,我是全部数据都已经获取到了,只是筛选一下要显示的数据先看下没有分页的代码
老规矩,先说下我实现的思路我是用v-for遍历一个json数组,展示里面的数据因为数据太多,页面切换时会卡顿,所以要分页我这分页实现模式并不是用ajax,我是全部数据都已经获取到了,只是筛选一下要显示的数据先看下没有分页的代码
先看下没有分页的代码
<template> <div class="goodFriends scroll"> <div v-for="(friend, index) in friendsList" :key="index"> ... </div> </div> </template>再看下收到分页的代码,如显示第一页,我是一页展示100个数据
<template> <div class="goodFriends scroll"> <div v-for="(friend, index) in friendsList" :key="index" v-if="index<100 && index>=0" > ... </div> </div> </template> 然后我们把上面的改成动态的,根据父组件传参,显示页面 <template> <div class="goodFriends scroll"> <div v-for="(friend, index) in friendsList" :key="index" v-if="index<maxNumber && index>=minNumber" > ... </div> </div> </template>js 我是通过props传参(也可以vuex传参)
props: { currentPage: { ...