http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 7612|回复: 5

[vue.js] vue.js+Ajax+分页+v-for+v-if+v-model使用例子

[复制链接]
发表于 2018-12-21 12:12:49 | 显示全部楼层 |阅读模式
vue.js+Ajax+分页+v-for+v-if+v-model使用例子

需求

1. 根据用户名查用户的所有登录日志
2. 带有分页
3. 安登录时间倒序
4.分页少于一页时不加载数据。

先来绑定一下搜索框的数据
[HTML] 纯文本查看 复制代码
 <td colspan="3">
                            <div class="form-control-wrap">
                                <label class="form-label">
                                    用户名:</label>
                                <input class="form-control ml1" v-model="username" />
                            </div>
                            <button class="btn btn-primary" v-on:click="getdata">
                                搜索</button>
                        </td>


v-model这个大家要注意,只能用于输入 输出框,基本上只能用在input类型的控件上,不能直接用于div
v-on:click是单击事件绑定的方法,方法名为getdata
我们下面直接用v-for来循环输出数据
[HTML] 纯文本查看 复制代码
<table class="table table-page">
                    <thead>
                        <tr>
                            <td align="center">
                                用户名
                            </td>
                            <td align="center">
                                登录时间
                            </td>
                            <td align="center">
                                登录IP
                            </td>
                            <td align="center">
                                useragent
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="info in userlogs">
                            <td align="center">
                                {{ info.User_name}}
                            </td>
                            <td align="center">
                                {{ info.StrUser_createdate}}
                            </td>
                            <td align="center">
                                {{ info.User_ip}}
                            </td>
                            <td align="center">
                                {{ info.User_useragent}}
                            </td>
                        </tr>
                    </tbody>

关于分页部分的处理如下
[HTML] 纯文本查看 复制代码
 <tfoot>
                        <tr>
                            <td colspan="11">
                                <div class="pagination-wrap">
                                    <div class="count">
                                         <div  >总页数  {{ pageCount}}    总记录数 {{ totalcount}}  </div>
                                    </div>
                                    <ul class="pagination" v-if="pageCount > 1">
                                        <li v-for="n in pageCount"><a href="javascripit:void(0)" v-bind:class="pageIndex === n + 1 ? 'active' : ''">
                                            {{ n + 1 }}</a> </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tfoot>


好了数据看一下

[JavaScript] 纯文本查看 复制代码
 <script type="text/javascript">
        var rw = new Vue({
            el: "#grid",
            data: {
                pageIndex: 1, //当前页
                pageCount: 0, //一共多少页
                totalcount: 0, //总行数
                pageSize: 10, //显示多少页
                username: "", //用户名
                userlogs: "" //用户列表集合
            },
            methods: {
                getdata: function (event) {
                    axios({
                        method: 'get',
                        url: "/System/Crm_User_logs.aspx?action=getpagelist&username=" + this.username + "&pageIndex=" + this.pageIndex
                    }).then(function (res) {
                        var data = res.data;
                        if (data.reCode > 0) {
                            rw.$data.pageCount = Math.floor(data.TotalCount / data.pageSize);
                            rw.$data.totalcount = data.TotalCount;
                            rw.$data.username = data.username;
                            rw.$data.pageSize = data.pageSize;
                            rw.$data.pageIndex = data.pageIndex;
                            rw.$data.userlogs = data.info;
                        }
                    });
                }
            }
        });
    </script>


我直接用的是axios组件,这个好像只能在V2.0以后使用,直接引用axios.min.js代码就行了。
两个类发上来大家方便下载
vue.js (304.03 KB, 下载次数: 3)


1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-12-21 12:53:04 | 显示全部楼层
[JavaScript] 纯文本查看 复制代码
  rw.pageCount = Math.floor(data.TotalCount / data.pageSize);
                            rw.totalcount = data.TotalCount;
                            rw.username = data.username;
                            rw.pageSize = data.pageSize;
                            rw.pageIndex = data.pageIndex;
                            rw.userlogs = data.info;

这样写和上面的写法作用相同。
发表于 2018-12-21 15:03:48 | 显示全部楼层
真是难得给力的帖子啊。
发表于 2018-12-21 17:03:13 | 显示全部楼层
真是难得给力的帖子啊。
发表于 2018-12-23 20:34:57 | 显示全部楼层
楼主加油,我们都看好你哦。
发表于 2019-8-6 15:35:50 | 显示全部楼层
多谢,找了好多,终于找到个简洁分页,拿来就能用的了
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 08:49

© 2014-2021

快速回复 返回顶部 返回列表