简单的Vue分页插件pagination.js

一款简单的Vue分页插件pagination.js，本插件时基于Vue和bootstrap，具有简单易用且自适应PC和移动端的特点，适用于任何有分页显示数据的需求的页面，分页按钮的样式和参数可以自由调整，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入bootstrap.min.css样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">

页面的body部分，div容器里放入一个navigation导航链接组标签，代码如下：

<div id="app" style="text-align: center;margin-top: 138px;">
    <navigation :pages="pages" :current.sync="pageNo" @navpage="msgListView"></navigation>
</div>

页面的底部，需引入vue库和分页插件，启用插件并设置好相应的参数，代码如下：

<script src="js/vue.min.js"></script>
<script type="text/javascript" src="js/pagination.min.js"></script>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        pageNo: 1,
        pages:15
    },
    methods:{
        msgListView(curPage){
            //根据当前页获取数据
            alert("当前是第"+curPage+"页");
        }
    }
})
</script>