Question

我正在尝试创建一个分页功能，以2的增量显示html块，然后用户可以选择一个页面。它要经历的块数由v-for定义。这是显示此代码的代码段

<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>

我在data属性中添加了adPage，以跟踪用户何时单击页面，并且页面号仅在实际可用的模板数量适当时出现。我在函数中有简单的逻辑，但不太确定从何而来。我当时想我要检查正在迭代的索引，并使其与adPage的差值在2以内。

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/vue@2.5.22/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>

使用Vue JS分页

1 个答案: