vue 數據假分頁？

Question

我在網上查到的都是打API那種取數據分頁
那假設數據直接寫在前端呢？
這樣我能怎麼樣做數據的分頁功能？
想不太透呢
有請大神解說

data() {
    return {
      realWebItems: [],
      pageSize: 5,
    }
  },

this.webItems.forEach((res, index) => {
      if (index + 1 <= this.pageSize)
        this.realWebItems.push(res)
    })

[
      {
        name: 'a',
      },
      {
        name: 'b',
      },
      {
        name: 'c',
      },
      {
        name: 'd',
      },
      {
        name: 'e',
      },
      {
        name: 'f1',
      },
      {
        name: 'f2',
      },
      {
        name: 'f3',
      },
      {
        name: 'f4',
      },
      {
        name: 'f5',
      },
      {
        name: 'f6',
      },
      {
        name: 'f7',
      },
      {
        name: 'f8',
      },
      {
        name: 'f9',
      },
]

Answer 1

其实很简单，无非就是把获取数据改成了从本地数组读取罢了

const totalCollections = [
  {id: 0, name: 'item 0'},
  {id: 1, name: 'item 1'},
  {id: 2, name: 'item 2'},
  {id: 3, name: 'item 3'},
  {id: 4, name: 'item 4'},
  {id: 5, name: 'item 5'}
]

export default {

  data() {
    return {
      page: 1, // 当前页
      pageSize: 3, // 每页数量, 自己按需调整
      currentPageData: [] // 当前页数据
    };
  },
  mounted() {
    this.loadData(this.page)
  },
  watch: {
    page(newPage) {
      this.loadData(newPage)
    }
  },
  methods: {
    loadData(page) {
      this.currentPageData = totalCollections.slice((page - 1) * pageSize, page * this.pageSize)
    }
  }
}