vue.js分页方案

站长苏飞

大家直接看代码吧。
html部分

[C#] 纯文本查看 复制代码

  <ul class="pagination" v-if="pageCount > 1">
        <li v-if="pageIndex>1"><a href="javascripit:void(0)" v-on:click="getdata(1)">首页</a></li>
        <li v-if="pageIndex>1"><a href="javascripit:void(0)" v-on:click="pageIndex--,getdata(pageIndex)">上一页</a></li>
        <li v-for="n in pageCount" v-bind:class="pageIndex === n ? 'cur':''"><a  href="javascripit:void(0)" v-on:click="getdata(n)">
                                            {{ n }}</a> </li>
        <li v-if="pageIndex!=pageCount"><a href="javascripit:void(0)" v-on:click="pageIndex++,getdata(pageIndex)">下一页</a></li>
         <li v-if="pageIndex!=pageCount"><a href="javascripit:void(0)" v-on:click="getdata(pageCount)">尾页</a></li>
</ul>

JS部分

[JavaScript] 纯文本查看 复制代码

     var rw = new Vue({
            el: "#grid",
            data: {
                pageIndex: 1, //当前页
                pageCount: 0, //一共多少页
                totalcount: 0, //总行数
                pageSize: 10, //显示多少页
                username: "", //用户名
                userlogs: "" //用户列表集合
            },
            methods: {
                getdata: function (n) {
                    axios({
                        method: 'get',
                        url: "User_logs.aspx?action=getpagelist&username=" + this.username + "&pageIndex=" + n
                    }).then(function (res) {
                        var data = res.data;
                        if (data.reCode > 0) {
                            rw.pageCount = Math.ceil(data.TotalCount / data.pageSize);
                            rw.totalcount = data.TotalCount;
                            rw.username = data.username;
                            rw.pageSize = data.pageSize;
                            rw.pageIndex = data.pageIndex;
                            rw.userlogs = data.info;
                        }
                    });
                }
            }
        });

站长苏飞

Amy

真是难得给力的帖子啊。