vue实现一个简单的分页功能实例详解

这是一个简单的分页功能，只能够前端使用，数据不能通过后台服务器进行更改，能容已经写死了。

下面的内容我是在做一个关于婚纱项目中用到的，当时好久没用vue了，就上网区找了别人的博客来看，发现只有关于element_ui的，基本全是，对自己没用什么用，就自己写了一个，效果如下：

点击相应的按钮切换到对应的内容内容：

下面我只发核心代码，css样式就不发了，自己想怎么写怎么写

 <!-- 分页内容 -->
          <ul class="blog-lists-box">
             <li class="blog-list" :key="index" v-for="(item, index) in dataShow" :class="{ 'alt': index%2 == 1 }">
                <div class="card">
                    <div class="blog-overlay">
                      <router-link to="/blog/singleBlog">
                        <figure>
                          <img :src="img1"/>
                          <figcaption></figcaption>
                        </figure>
                      </router-link>
                    </div>
                    <div class="card-body">
                       <router-link to="/blog/singleBlog">
                         <h4 class="card-title">{{item.title}}</h4>
                       </router-link>
                       <div class="card-footer">
                         <div class="card-footer-box d-flex">
                           <div class="author-box">
                             <a href="#" rel="external nofollow" >
                               <img :src="header1"/>
                               <span>{{item.username}}</span>
                             </a>
                           </div>
                           <div class="blog-date text-uppercase">
                             <i class="fa fa-calendar"></i>
                             <span>{{item.time}}</span>
                           </div>
                         </div>
                       </div>
                    </div>
                </div>
              </li>
          </ul>
          <!-- 分页按钮组 -->
          <div class="page">
             <ul class="pagination clearfix flex-center">
                <li class="page-item stic">
                   <a class="page-link "  v-on:click="prePage">Prev</a>
                </li>
                <li class="page-item" :key="index" v-for="(item, index) in totalPage">
                   <a class="page-link"  v-on:click="toPage(index)" :class="{active: currentPage == index}">{{ index+1 }}</a>
                </li>
                <li class="page-item">
                   <a class="page-link"  v-on:click="nextPage">Next</a>
                </li>
             </ul>
          </div>

下面是vuejs代码可能有点多，但是没关系，这个会了，以后遇到直接就可以拿来用了

 data () {
    return {
      img1: img1,
      header1: header1,
      listArray: [{
        'title': '25 Places To Get The Best Wedding...',
        'username': 'liulong',
        'time': '2019/12/6'
      }, {
        'title': '10 Bridal Bouquets You'll Fall In Love...',
        'username': 'wangxianhui',
        'time': '2019/12/7'
      }, {
        'title': 'Tips For Choosing The Right Weddi...',
        'username': 'chenggang',
        'time': '2019/12/8'
      }, {
        'title': 'Planning The Perfect Bachelorette...',
        'username': 'wangwengang',
        'time': '2019/12/9'
      }, {
        'title': 'Top 20 Tips for Wedding Invitat...',
        'username': 'yuzhiwei',
        'time': '2019/12/10'
      }, {
        'title': 'Best Tips for the Bride and Groom...',
        'username': 'zhaopu',
        'time': '2019/12/11'
      }],
      // 控制每页显示数据的数数量
      pageSize: 3,
      // 默认显示第几页
      currentPage: 0,
      // 总数据
      totalPage: [],
      // 当前显示的数据
      dataShow: []
    }
  },
  methods: {
    nextPage: function () {
      if (this.currentPage === this.pageNum - 1) {
        return
      }
      this.dataShow = this.totalPage[++this.currentPage]
    },
    prePage: function () {
      if (this.currentPage === 0) {
        return
      }
      this.dataShow = this.totalPage[--this.currentPage]
    },
    toPage: function (page) {
      this.currentPage = page
      this.dataShow = this.totalPage[this.currentPage]
    }
  },
  created: function () {
    this.pageNum = Math.ceil(this.listArray.length / this.pageSize) || 1
    for (var i = 0; i < this.pageNum; i++) {
      this.totalPage[i] = this.listArray.slice(this.pageSize * i, this.pageSize * (i + 1))
    }
    this.dataShow = this.totalPage[this.currentPage]
  }

以上就是vue实现一个简单的分页功能的详细内容，更多关于vue实现一个简单的分页功能的资料请关注我们其它相关文章！