Vue前端分页

<template>
 <div class="content-view">
  <div class="div" v-for="(item, index) in currentPageData" :key='index' > 
    <div>{{item.name}}</div>
  </div>
  <footer>
      <button @click="prevPage()">上一页</button>
      <span>第{{currentPage}}页/共{{totalPage}}页</span>
  </footer>
</div>
</template>
  
    export default {
        data() {
          return {
               previewVideos: [
                    {streamUrl: 'rtmp://media3.sinovision.net:1935/live/livestream', name: 'video5', id: '1'},
                    {streamUrl: 'rtmp://ns8.indexforce.com/home/mystream', name: 'video3', id: '2'},
                    {streamUrl: 'rtmp://media3.sinovision.net:1935/live/livestream', name: 'video5', id: '3'},
                    {streamUrl: 'rtmp://ns8.indexforce.com/home/mystream', name: 'video3', id: '4'},
                    {streamUrl: 'rtmp://media3.scctv.net/live/scctv_800', name: 'video5', id: '5'},
                    {streamUrl: 'rtmp://media3.scctv.net/live/scctv_800', name: 'video3', id: '6'},
                    {streamUrl: 'rtmp://192.168.1.139/hls/mystream', name: 'video5', id: '7'},
                    {streamUrl: 'rtmp://192.168.1.139/hls/mystream', name: 'video3', id: '8'},
                    {streamUrl: 'rtmp://live.chosun.gscdn.com/live/tvchosun1.stream', name: 'video5', id: '9'},
                    {streamUrl: 'rtmp://live.chosun.gscdn.com/live/tvchosun1.stream', name: 'video3', id: '10'},
                ],
                currentPageData: [] //当前页显示内容
                totalPage: 1, // 统共页数,默认为1
                currentPage: 1, //当前页数 ,默认为1
                pageSize: 5, // 每页显示数量
          }
        },
            mounted() {
           
            // 计算一共有几页
            this.totalPage = Math.ceil(this.previewVideos.length / this.pageSize);
            // 计算得0时设置为1
            this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            this.getCurrentPageData();

        },
        
        methods:{
               getCurrentPageData() {
                    let begin = (this.currentPage - 1) * this.pageSize;
                    let end = this.currentPage * this.pageSize;
                    this.currentPageData = this.previewVideos.slice(
                        begin,
                        end
                    );
            },
            //上一页
            prevPage() {
                console.log(this.currentPage);
                if (this.currentPage == 1) {
                    return false;
                } else {
                    this.currentPage--;
                    this.getCurrentPageData();
                }
            },
            // 下一页
            nextPage() {
                if (this.currentPage == this.totalPage) {
                    return false;
                } else {
                    this.currentPage++;
                    this.getCurrentPageData();
                }
            },
        }
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值