n-pagination代码实例

n-pagination是一个基于Vue.js的分页组件，它提供了一种简单的方式来实现在网页上展示数据列表的分页功能。下面是一个基本的使用示例：

<template>
  <div>
    <n-pagination :total="totalItems" @change="handlePageChange"></n-pagination>
    <ul>
      <!-- 这里是你实际的数据列表 -->
      <li v-for="(item, index) in displayedItems" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { NPagination } from 'n-pagination';

export default {
  components: {
    NPagination,
  },
  data() {
    return {
      totalItems: 100, // 总共的项目数
      currentPage: 1, // 当前页码
    };
  },
  methods: {
    handlePageChange(pageNumber) {
      this.currentPage = pageNumber;
      // 根据新页码从服务器获取数据
      // 这里只是一个示例，实际上你需要更新`displayedItems`
      this.displayedItems = this.data.slice((pageNumber - 1) * 10, pageNumber * 10);
    },
  },
};
</script>

在这个例子中，我们首先引入了`NPagination`组件，并绑定了`totalItems`和当前页`currentPage`到组件的属性。当用户点击分页按钮时，`handlePageChange`方法会被触发，更新当前页并动态地显示对应页范围内的数据。