Vue js 似乎打破了引导分页答案

<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" v-if="page != 1" @click="page--"> Previous </a> </li> <li class="page-item"> <a class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> [[pageNumber]] </a> </li> <li class="page-item"> <a class="page-link" @click="page++" v-if="page < pages.length"> Next </a> </li> </ul> </nav>

【解决方案1】：

您的分页看起来完全错误的原因是因为您将v-for 放在a 标记上的li 旁边。

您需要将其放在li 上，因为每个li 代表一个页面按钮

在 sn-p 中，我在下一个按钮上替换了您的 v-if，因为让按钮消失可能会造成混淆。相反，我使用了条件类。

作为替代方案，您可以使用bootstrap-vue's pagination，这可能会省去您自己编写逻辑的一些麻烦。

new Vue({
  el: '#app',
  data() {
    return {
      page: 1,
      pages: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  }
})

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item" :class="{ 'disabled': page == pages[0] }">
          <a class="page-link" href="#" @click="page--">
            Previous
          </a>
        </li>
      <li class="page-item" 
          :class="{ 'active': page === pageNumber }" 
          v-for="pageNumber in pages.slice(page-1, page+4)">
        <a class="page-link" href="#" @click="page = pageNumber">
          {{ pageNumber }}
        </a>
      </li>
      <li class="page-item" :class="{ 'disabled': page >= pages.length }">
        <a class="page-link" href="#" @click="page++">
          Next
        </a>
      </li>
    </ul>
  </nav>
</div>

【讨论】：