背景:前台通过ajax获取list数据,页面上需要讲数据遍历到标签ul里面,一个ul对于多个li
页面如图所示:
直接代码:
html:
{{index + 1}}
{{site.rechargeDate}}
{{site.storeNo}}
{{site.rechargeNo}}
{{site.rechargeAmount}}
{{site.receiveAmount}}
{{site.transferAmount}}
{{index + 1}}
{{site.rechargeDate}}
{{site.storeNo}}
{{site.rechargeNo}}
{{site.rechargeAmount}}
{{site.receiveAmount}}
{{site.transferAmount}}
js:
//全局定义vue中的model
var model = {
siteRecharge:[],
siteTransaction:[],
// 当前页码
cur: 1,
// 总页数
all: 1,
recMsg: '',
traMsg: ''
};
(function (vue) {
// html模板信息
var template = '
/* -------------------------卡号/手机号--搜索--------------------------*/
$(".search").on("click", function() {
var storeNo = "";
var searchInfo = $.trim($("#query").val());
//var searchInfo = $("#query").val();
//var searchInfo = "13814882394";
var pageNum = "1";
var pageSize = "10";
var MemberSearchInfoBean = {pageNum:pageNum,pageSize:pageSize,storeNo:storeNo,searchInfo:searchInfo};
$.ajax({
type : 'POST',
url : "/member/searchMember",
contentType : 'application/json',
data : JSON.stringify(MemberSearchInfoBean),
success : function(data) {
if(data == ""){
$(".errorMsg").show();
console.log(data);
}else{
$(".errorMsg").hide();
console.log(data);
console.log(data[4]);
//num为充值记录的总条数
if((data[4] % 10) == 0){
num = Math.floor(data[4]/10);
}else {
var num = Math.floor(data[4]/10) + 1;
}
//num1为交易记录的总条数
if((data[5] % 10) == 0){
num1 = Math.floor(data[5]/10);
}else {
var num1 = Math.floor(data[5]/10) + 1;
}
//页码
model.all = num;
if(model.all>=11) {
$(".page-bar ul").css("width",("626px"))
}else {
$(".page-bar ul").css("width",(model.all*44+142)+"px")
}
$("#memberQyup").on("click","li",function(){
if($(this).hasClass("charge")) {
model.all = num;
if(model.all>=11) {
$(".page-bar ul").css("width",("626px"))
}else {
$(".page-bar ul").css("width",(model.all*44+142)+"px")
}
}else if($(this).hasClass("mb_tra")) {
model.all = num1;
if(model.all>=11) {
$(".page-bar ul").css("width",("626px"))
}else {
$(".page-bar ul").css("width",(model.all*44+142)+"px")
}
}
})
$(".memberQuery-con").show();
var sex = "";
if(data[0].sex == "1"){
sex = "男";
}else if(data[0].sex == "2"){
sex = "女";
}else{
sex = "性别未知";
}
if(data[0].phone == ""){
$(".changePhone").hide();
}else{
$(".bindPhone").hide();
}
if(data[0].status == "1"){
$(".bindMemberCard").show();
$(".unlockMemberCard").hide();
}
if(data[0].status == "2"){
$(".unlockMemberCard").show();
$(".bindMemberCard").hide();
}
if(data[0] != null){
//赋值普通会员资料
$("#iphoneNum").text(data[0].phone);
$("#cardNum").text(data[0].memberNo);
if(data[0].memberName == ""){
$(".name").html("暂无")
}else{
$(".name").text(data[0].memberName)
}
$(".sex").text(sex)
$(".birthday").text(data[0].birthday)
$(".createTime").text(data[0].addTime)
}
if(data[1] != null){
//赋值存储/积分
$(".stored-col1-sub1").html(data[1].availableAmount)
$(".totalAmount").html(data[1].totalAmount)
$(".stored-col3-sub1").html(data[1].availablePoint)
$(".totalPoint").html(data[1].totalPoint)
}
//隐藏的id值,为了点击充值按钮时能作为参数传给后台
if(data[0] != null){
$("#baocunId").text(data[0].id);
}
//赋值充值/交易列表
if(data[2] != null){
model.siteRecharge = data[2];
}
if(data[3] != null){
model.siteTransaction = data[3];
}
$("#upAddAdjust").html(data[6]);
$("#upDecreaseAdjust").html(data[7]);
}
}
});
});
分页参考:http://www.cnblogs.com/jh007/p/6185599.html
http://www.runoob.com/vue2/vue-loop.html