Vue.js 在div v-for（Vuejs）中添加分页

我想在div v-for循环中添加分页。它已经显示了我的数据。但是它仍然不是分页。有人能推荐我使用什么分页吗？我想该项目只显示每页5，但我不知道我应该使用哪个分页。我使用b-pagination，但它不起作用。多谢各位

代码如下：

App.vue

{{p.description}}

导出默认值{
名称：“应用程序”，
数据（）{
返回{
样本：[
{
描述：“戴着红伞的女士”，
图像：“https://i.imgur.com/pwpWaWu.jpg",
},
{
描述：“花和一些水果”，
图像：“https://i.imgur.com/KIPtISY.jpg",
},
{
描述：“美丽的风景”，
图像：“https://i.imgur.com/2jMCqQ2.jpg",
},
{
描述：“某种鸟”，
图像：“https://i.imgur.com/QFDRuAh.jpg",
},
{
描述：“龙的攻击”，
图像：“https://i.imgur.com/8yIIokW.jpg",
},
//第二页
{
描述：“戴着红伞的女士”，
图像：“https://i.imgur.com/pwpWaWu.jpg",
},
{
描述：“花和一些水果”，
图像：“https://i.imgur.com/KIPtISY.jpg",
},
{
描述：“美丽的风景”，
图像：“https://i.imgur.com/2jMCqQ2.jpg",
},
{
描述：“某种鸟”，
图像：“https://i.imgur.com/QFDRuAh.jpg",
},
{
描述：“龙的攻击”，
图像：“https://i.imgur.com/8yIIokW.jpg",
},
],
};
},
};

您可以使用

v-page

软件包进行分页。实现方式如下：

{{p.description}}
导出默认值{
名称：“应用程序”，
数据（）{
返回{
pageArr:[]，
电流：0，
arr:[
{
描述：“戴着红伞的女士”，
图像：“https://i.imgur.com/pwpWaWu.jpg",
},
{
描述：“花和一些水果”，
图像：“https://i.imgur.com/KIPtISY.jpg",
},
{
描述：“美丽的风景”，
图像：“https://i.imgur.com/2jMCqQ2.jpg",
},
{
描述：“某种鸟”，
图像：“https://i.imgur.com/QFDRuAh.jpg",
},
{
描述：“龙的攻击”，
图像：“https://i.imgur.com/8yIIokW.jpg",
},
//第二页
{
描述：“戴着红伞的女士”，
图像：“https://i.imgur.com/pwpWaWu.jpg",
},
{
描述：“花和一些水果”，
图像：“https://i.imgur.com/KIPtISY.jpg",
},
{
描述：“美丽的风景”，
图像：“https://i.imgur.com/2jMCqQ2.jpg",
},
{
描述：“某种鸟”，
图像：“https://i.imgur.com/QFDRuAh.jpg",
},
{
描述：“龙的攻击”，
图像：“https://i.imgur.com/8yIIokW.jpg",
},
//第三页
{
描述：“戴着红伞的女士”，
图像：“https://i.imgur.com/pwpWaWu.jpg",
},
{
描述：“花和一些水果”，
图像：“https://i.imgur.com/KIPtISY.jpg",
},
{
描述：“美丽的风景”，
图像：“https://i.imgur.com/2jMCqQ2.jpg",
},
{
描述：“某种鸟”，
图像：“https://i.imgur.com/QFDRuAh.jpg",
},
{
描述：“龙的攻击”，
图像：“https://i.imgur.com/8yIIokW.jpg",
},
],
};
},
方法：{
页面光电转换（pInfo）{
此.pageArr.拼接（0，此.pageArr.长度）；
让start=0，
结束=0；
开始=pInfo.pageSize*（pInfo.pageNumber-1）；
结束=开始+pInfo.pageSize；
如果（end>this.arr.length）end=this.arr.length；
for（让i=start；i

你到底想要什么？？图像滑块或分页？？我想要分页

<template>
  <div id="app">
    <div class="columns is-multiline is-mobile">
      <div class="column is-half" v-for="(p, index) in pageArr" :key="index">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img :src="p.image" alt="Placeholder image" />
            </figure>
          </div>
          <div class="card-content">{{ p.description }}</div>
        </div>
      </div>
    </div>
    <v-page
      :total-row="arr.length"
      align="left"
      v-model="current"
      @page-change="pagePhotoChange"
      :page-size-menu="[5, 10]"
    ></v-page>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pageArr: [],
      current: 0,
      arr: [
        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },

        //2nd page

        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },

        // 3rd page

        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },
      ],
    };
  },
  methods: {
    pagePhotoChange(pInfo) {
      this.pageArr.splice(0, this.pageArr.length);
      let start = 0,
        end = 0;
      start = pInfo.pageSize * (pInfo.pageNumber - 1);
      end = start + pInfo.pageSize;
      if (end > this.arr.length) end = this.arr.length;
      for (let i = start; i < end; i++) {
        this.pageArr.push(this.arr[i]);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>