了解如何在Bootstrap-vue中使用分页

<template>
  <div>
    <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" @input="onPageChange"></b-pagination>
    <div v-for="item in displayedItems" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      perPage: 10,
      items: [], // 从后端获取的所有数据
    };
  },
  computed: {
    totalRows() {
      return this.items.length;
    },
    displayedItems() {
      const startIndex = (this.currentPage - 1) * this.perPage;
      const endIndex = startIndex + this.perPage;
      return this.items.slice(startIndex, endIndex);
    },
  },
  methods: {
    onPageChange(page) {
      this.currentPage = page;
    },
  },
  mounted() {
    // 从后端获取数据并赋值给items数组
  },
};
</script>