vue.js循环ajax数据,vue.js遍历ajax请求的数据

按ip地址搜索

按微信号搜索

按日期搜索

按地区搜索

#IP地址进入路径复制的微信号浏览日期用户地区操作

{{ i+1 }}{{ item.ip }}{{ item.route }}{{ item.copy }}{{ item.date }}{{ item.address }} 删除

function ajax_data(){

var result;// 使用对象接收ajax传递回来的数据

$.ajax({

dataType:'json',// 格式为json格式

url : 'mysql.php',// 请求数据地址

async:false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待

//数据加载完成后才继续执行

success : function(data){

result = data;// 将数据传给用来接收的对象

}

});

return result;// 将保存了数据的对象返回

}

var data = ajax_data();// 调用函数，接收函数返回的数据

var xm = new Vue({

el:'#dv',

data:{

sel:'ip',

keywords:'',

list:[]

},

methods:{

add(data){

//　将数据传到 list 中，用于遍历

for (var i = 0;i

this.list.push(data[i]);

}

},

search(keywords){

var newarr = this.list.filter(item =>{

// 判断 检索的 数据类型

switch(this.sel){

case 'ip' :

// 确定了数据类型后，根据字符串判断 list 每一项的对应的数据，输出存在的 list 项

if (item.ip.includes(keywords)){

return item;

}break;

case 'copy' :

if (item.copy.includes(keywords)){

return item;

}break;

case 'date' :

if (item.date.includes(keywords)){

return item;

}break;

case 'address' :

if (item.address.includes(keywords)){

return item;

}break;

}

})

return newarr;

},

// 绑定 href 属性，为他传递参数时，不能直接传递，必须要使用函数return的方式。

url_mysql(id){

return "./mysql.php?id="+id;

}

}

});

// 调用 vue 对象的add方法，传入数据

xm.add(data);