vue实现数据分页导航按钮效果代码-html代码-BFW代码库

vue实现数据分页导航按钮效果代码

代码语言：html

所属分类：其他

代码描述：vue实现数据分页导航按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>
  body{
      padding: 100px;
  }
    .page {
      display: inline-block;
      margin: 50px;
    }

    .pagelist {
      display: inline-block;
      height: 40px;
      line-height: 40px;
    }

    .pagelist span {
      font-size: 20px;
      color: rgba(51, 51, 51, 1);
    }

    .pagelist .jump {
      padding: 6px 14px;
      text-align: center;
      cursor: pointer;
      margin-left: 30px;
      min-width: 40px;
      height: 40px;
      background: rgba(204, 204, 204, 0.3);
      border-radius: 6px;
    
    }

    .pagelist .bgprimary {
      cursor: default;
      color: #fff;
      background: rgba(255, 30, 27, 1);
      border-radius: 6px;
    }

    .jumpinp input {
      width: 55px;
      height: 26px;
      font-size: 13px;
      border: 1px solid #ccc;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      text-align: center;
    }

    .ellipsis {
      padding: 0px 8px;
      text-align: center;
      cursor: pointer;
      margin-left: 30px;
      width: 40px;
      height: 40px;
      background: rgba(204, 204, 204, 0);
      border-radius: 6px;
    }

    .bgprimary {
      cursor: default;
      color: #fff;
      background: rgba(255, 30, 27, 1);
      border-radius: 6px;
    }

    .pagelist .jump.disabled {
      pointer-events: none;
      color: rgba(153, 153, 153, 1);
    }

    .jumppoint {
      margin-left: 30px;
    }

    .pagelist .gobtn {
      font-size: 18px;
    }

    .pageNum {
      display: inline-block;
      height: 28px;
      font-size: 16px;
     
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 28px;
     
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="page" v-show="show">
      <div class="pagelist">
        <span class="jump" :class="{disabled:starts}" @click="{current_page--}">上一页</span>
        <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
        <span class="ellipsis" v-show="efont">...</span>
        <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
          @click="jumpPage(num)">{{num}}</spa.........完整代码请登录后点击上方下载按钮下载查看