html 遍历ul,通过vue遍历ul列表

背景：前台通过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