分页与Vue的JS

Question

我想创建一个分页功能可显示增量为2的HTML代码，然后用户可以选择的页面。块，它会经历的量由V型的定义。这里有一个代码，以显示此块

<template v-for="(ad, index) in ads" v-cloak>
                  <div class="box ad-box" v-if="showAds(index)" @click="hideInput(index)">
                    <span> {{ lines(index, 'headline1') }} | </span>
                    <span> {{ lines(index, 'headline2') }} | </span>
                    <span> {{ lines(index, 'headline3') }} </span>
                    <span class="icon is-pulled-right has-text-grey-light has-text-weight-light" @click="deleteAd()">
                      <div v-show="ad.boolean">
                        <p class="">X</p>
                      </div>
                    </span>
                    <br>
                    <p><span class="is-size-7">{{lines(index, 'finalurl')}}</span><span class="is-size-7 has-text-success" v-if="lines(index, 'path1') !== '' ">/{{lines(index, 'path1')}}/{{lines(index,'path2')}}</span></p>
                    <span class="is-size-7 is-grey">{{lines(index, 'desc1') + lines(index, 'desc2')}} </span>
                  </div>
                  <br />
</template>
                <nav class="pagination" role="navigation" aria-label="pagination">
                  <ul class="pagination-list">
                    <li>
                      <a class="pagination-link is-current">1</a>
                    </li>
                    <li v-show="ads.length > 2">
                      <a class="pagination-link" @click="adPage = 2">2</a>
                    </li>
                    <li v-show="ads.length > 4">
                      <a class="pagination-link" @click="adPage = 3">3</a>
                    </li>
                    <li v-show="ads.length > 6">
                      <a class="pagination-link" @click="adPage = 4">4</a>
                    </li>
                    <li v-show="ads.length > 8">
                      <a class="pagination-link" @click="adPage = 5">5</a>
                    </li>
                  </ul>
                </nav>

我有adPage数据属性来跟踪，当用户点击页面上的页码，只会显示为模板的适量实际可用的。我有简单的逻辑功能，但真的不知道从哪里何去何从。我想我会检查什么正在迭代的指数，并检查它是从2以往任何时候都adPage是什么三角形内。

newAds:[
  [
    {
      id: 0,
    headline1: 'first 1',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: true
    },
    {
     id: 0,
    headline1: 'first 2',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: false
    }
  ],
  [
    {
      id: 1,
    headline1: 'second 1',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: false
    },
    {
     id: 1,
    headline1: 'second 2',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: false
    }
  ]
]

Answer 1

下面是显示我在我的评论中提到一个片段。你甚至可以改变每页的广告数量

new Vue({
  el: '#app',
  data: {
    perPage: 2,
    ads: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ay', 'bee', 'cee'],
    adPage: 1
  },
  computed: {
    currentAds() {
      const startIndex = this.perPage * (this.adPage - 1);
      const endIndex = startIndex + this.perPage;
      return this.ads.slice(startIndex, endIndex);
    }
  }
});

.is-current {
  font-weight: bold;
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <input v-model.number="perPage">
  <template v-for="(ad, index) in currentAds" v-cloak>
    <div>{{ad}}</div>
  </template>
  <nav class="pagination" role="navigation" aria-label="pagination">
    <ul class="pagination-list">
      <li v-for="p in Math.ceil(ads.length/perPage)">
        <a class="pagination-link" :class="{'is-current': adPage == p}" @click="adPage = p">{{p}}</a>
      </li>
    </ul>
  </nav>
</div>