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)
|