vue 分页

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { 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' },
        // 更多项目...
      ],
      currentPage: 1,
      pageSize: 2
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.pageSize);
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.items.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

解释说明

1. 模板部分 (<template>):

   • 使用 v-for 指令遍历当前页的项目，并显示在 <li> 标签中。
   • 提供两个按钮用于切换页面，分别是“上一页”和“下一页”，并根据当前页码是否为第一页或最后一页来禁用按钮。

2. 脚本部分 (<script>):

   • data 函数返回一个对象，包含所有项目的数组 items、当前页码 currentPage 和每页显示的项目数 pageSize。
   • computed 计算属性：
     • totalPages: 计算总页数。
     • paginatedItems: 根据当前页码和每页大小计算出当前页要显示的项目。
   • methods 方法：
     • nextPage: 如果当前页不是最后一页，则将当前页码加一。
     • prevPage: 如果当前页不是第一页，则将当前页码减一。