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

最新推荐文章于 2024-06-25 09:36:15 发布

笑问苍天丶

最新推荐文章于 2024-06-25 09:36:15 发布

阅读量1.9w

点赞数 5

分类专栏：前端技术文章标签：分页控件 bootstrap vue

本文链接：https://blog.csdn.net/qiuhaotc/article/details/53031884

版权

本文介绍如何利用Vue.js和Bootstrap构建一个分页控件，展示具体实现效果和相关代码。

摘要由CSDN通过智能技术生成

使用 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" />
</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)" 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&