vue.js - 创建分页组件

Question

我正在尝试创建分页组件。例如，如果我的 API 返回"pages": 9

例如，如果我有 9 页，我想将列表剪切为 5，并在图像上添加三个点。我希望能够提供可以在哪个索引处删除列表。最好的方法是什么？我接近这个错误？

<div v-for="index in pages" class="flex">
<button>{{index}}</button>
</div>

标签： vue.jsvuejs3

Answer 1

假设您收到cutIndex并apiPages作为组件的道具，那么您的模板可能如下所示：

<div v-for="page in Math.min(cutIndex, apiPages)" class="flex">
  <button>{{page}}</button>
</div>
<template v-if="cutIndex < apiPages">
  <div class="flex">
    <button>...</button>
  </div>
  <div class="flex">
    <button>{{apiPages}}</button>
  </div>
</template>