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

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

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

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

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

 
          

             

                

                    

                      
                        

                          
                          

                        
                      
                    
                    

                       
                         
{{item.title}}
                       
                       

                         

                           

                             
                               
                               {{item.username}}
                             
                           
                           

                             
                             {{item.time}}
                           
                         
                       
                    
                
              
          
          
          

             

                

                   Prev
                
                

                   {{ index+1 }}
                
                

                   Next
                
             
          

下面是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实现一个简单的分页功能的资料请关注脚本之家其它相关文章！