Javascript 对象的Vue分页数组

我是Vue和阵列的新手。我想对我的json数组进行分页，并将其限制为每页仅10项。但是，在我的

正文中，它显示了数组中的所有列表。我试过别的办法，但没用。有谁能帮我找到对这个json数组分页并在我的表中反映的最佳方法吗？多谢各位

代码如下：

App.vue

<template>
  <div id="app">
    <table class="table t3">
      <thead class="thead">
        <tr class="tr">
          <th class="td no" width="10%">
            <span class="has-text-orange">No</span>
          </th>
          <th class="td">
            <span class="has-text-orange">Name</span>
          </th>
        </tr>
      </thead>
      <tbody
        class="searchable tbody"
        style="max-height: 200px; min-height: 200px"
      >
        <tr class="tr" v-for="(p, index) in alphabets" :key="index">
          <td class="td no" width="10%">{{ ++index }}</td>
          <td class="td">{{ p.letter }}</td>
        </tr>
      </tbody>
    </table>
    <div class="column is-12">
      <nav
        class="pagination is-right"
        role="navigation"
        aria-label="pagination"
      >
        <ul class="pagination-list">
          <li>
            <a @click="prev"> Prev </a>
          </li>
          <li>
            <span
              class="pagination-link go-to has-text-orange"
              aria-label="Goto page 1"
              >{{ current }}</span
            >
          </li>
          <li>
            <a @click="next()"> Next </a>
          </li>

          <li>
            <input type="text" class="pagination-link" />
          </li>
          <li>
            <button class="button">Go</button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      current: 1,
      alphabets: [
        { letter: "a" },
        { letter: "b" },
        { letter: "c" },
        { letter: "d" },
        { letter: "e" },
        { letter: "f" },
        { letter: "g" },
        { letter: "h" },
        { letter: "i" },
        { letter: "j" },
        { letter: "k" },
        { letter: "l" },
        { letter: "m" },
        { letter: "n" },
        { letter: "o" },
        { letter: "p" },
        { letter: "q" },
        { letter: "r" },
        { letter: "s" },
        { letter: "t" },
        { letter: "u" },
        { letter: "v" },
        { letter: "w" },
        { letter: "x" },
        { letter: "y" },
        { letter: "z" },
      ],
    };
  },
};
</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>

不
名称
{{++index}}
{{p.letter}}


上


{{current}}


下一个




去


导出默认值{
名称：“应用程序”，
组件：{}，
数据（）{
返回{
当前：1，
字母表：[
{字母：“a”}，
{字母：“b”}，
{字母：“c”}，
{信：“d”}，
{字母：“e”}，
{信：“f”}，
{字母：“g”}，
{字母：“h”}，
{信：“我”}，
{信：“j”}，
{字母：“k”}，
{字母：“l”}，
{字母：“m”}，
{字母：“n”}，
{字母：“o”}，
{字母：“p”}，
{字母：“q”}，
{字母：“r”}，
{字母：“s”}，
{字母：“t”}，
{字母：“u”}，
{字母：“v”}，
{字母：“w”}，
{字母：“x”}，
{字母：“y”}，
{字母：“z”}，
],
};
},
};
#应用程序{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

循环通过一个简化集，而不是所有数据。您有一个

当前的

页面；为

pageSize

创建属性：

pageSize:10

计算缩减集的索引边界，每当

current

更改（或

pageSize

）时更改：

计算：{
indexStart（）{
返回（this.current-1）*this.pageSize；
},
indexEnd（）{
返回this.indexStart+this.pageSize；
},
},

使用另一个计算值从边界导出缩减集：

paginated（）{
返回this.alphabets.slice（this.indexStart，this.indexEnd）；
}

循环通过缩减集而不是所有数据：

v-for=“（p，索引）分页”

这是您更新的演示（当“下一步”和“上一步”按钮溢出时，您必须修复它们）：

newvue({
el:“应用程序”，
数据（）{
返回{
当前：1，
页面大小：10，
字母表：[
{字母：“a”}，
{字母：“b”}，
{字母：“c”}，
{信：“d”}，
{字母：“e”}，
{信：“f”}，
{字母：“g”}，
{字母：“h”}，
{信：“我”}，
{信：“j”}，
{字母：“k”}，
{字母：“l”}，
{字母：“m”}，
{字母：“n”}，
{字母：“o”}，
{字母：“p”}，
{字母：“q”}，
{字母：“r”}，
{字母：“s”}，
{字母：“t”}，
{字母：“u”}，
{字母：“v”}，
{字母：“w”}，
{字母：“x”}，
{字母：“y”}，
{字母：“z”}，
],
};
},
计算：{
indexStart（）{
返回（this.current-1）*this.pageSize；
},
indexEnd（）{
返回this.indexStart+this.pageSize；
},
分页（）{
返回this.alphabets.slice（this.indexStart，this.indexEnd）；
}
},
方法：{
prev（）{
这是当前的--；
},
下一个（）{
这个.current++；
}
}
});

不
名称
{{indexStart+++index}
{{p.letter}}


上


{{current}}


下一个




去