Vue.js结合bootstrap实现分页控件

网络编程 2024/9/24 佚名

3 1 2

本文为大家分享了使用vue.js结合bootstrap 开发的分页控件，供大家参考，具体内容如下

效果如下

实现代码：

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 <title> Vue-PagerTest</title> 
 <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" rel="external nofollow" /> 
</head> 
<body> 
 <div class="container body-content"> 
 <div id="test" class="form-group"> 
  <div class="form-group"> 
  <div class="page-header"> 
   数据 
  </div> 
  <table class="table table-bordered table-responsive table-striped"> 
   <tr> 
   <th>姓名</th> 
   <th>年龄</th> 
   <th>删除信息</th> 
   </tr> 
   <tr v-for="item in arrayData"> 
   <td class="text-center">{{item.name}}</td> 
   <td>{{item.age}}</td> 
   <td><a href="javascript:void(0)" rel="external nofollow" v-on:click="deleteItem($index,item.age)">del</a></td> 
   </tr> 
  </table> 
  <div class="page-header">分页</div> 
  <div class="pager" id="pager"> 
   <span class="form-inline"> 
   <select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)" number> 
    <option value="10">10</option> 
    <option value="20">20</option> 
    <option value="30">30</option> 
    <option value="40">40</option> 
   </select> 
   </span> 
   <template v-for="item in pageCount+1"> 
   <span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)"> 
    首页 
   </span> 
   <span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)"> 
    上一页 
   </span> 
   <span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)" v-bind:class="item==pageCurrent"> 
    {{item}} 
   </span> 
   <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled"> 
    ... 
   </span> 
   <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="showPage(item,$event)" <span style="font-family: Arial, Helvetica, sans-serif;"> v-bind:class="item==pageCurrent"</span><span style="font-family: Arial, Helvetica, sans-serif;"</span> 
    {{item}} 
   </span> 
   <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled"> 
    ... 
   </span> 
   <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(item,$event)" <span style="font-family: Arial, Helvetica, sans-serif;">v-bind:class="item==pageCurrent"</span><span style="font-family: Arial, Helvetica, sans-serif;"</span> 
    {{item}} 
   </span> 
   <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)"> 
    下一页 
   </span> 
   <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)"> 
    尾页 
   </span> 
   </template> 
   <span class="form-inline"> 
   <input class="pageIndex form-control" style="width:60px;text-align:center" type="text" v-model="pageCurrent | onlyNumeric" v-on:keyup.enter="showPage(pageCurrent,$event,true)" /> 
   </span> 
   <span>{{pageCurrent}}/{{pageCount}}</span> 
  </div> 
  </div> 
 </div> 
 <hr /> 
 <footer> 
  <p>&copy; 2016 - 笑问苍天丶</p> 
 </footer> 
 </div> 
 
 
 <script src="/UploadFiles/2021-04-02/jquery.js">

源码下载: bootstrap分页控件
参考资料: Vue.js官网
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue.js,bootstrap,分页控件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Vue.js结合bootstrap实现分页控件”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

Vue.js结合bootstrap实现分页控件

Node.js中.pfx后缀文件的处理方法

js获取ip和地区

评论“Vue.js结合bootstrap实现分页控件”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接