<div id="dv" style="text-align: center;">
<div class="head input-group-prepend">
<select class="btn btn-primary" id="sel" v-model="sel">
<option value="ip">按ip地址搜索</option>
<option value="copy">按微信号搜索</option>
<option value="date">按日期搜索</option>
<option value="address">按地区搜索</option>
</select>
<input type="text" name="" class="form-control" v-model="keywords">
</div>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">IP地址</th>
<th scope="col">进入路径</th>
<th scope="col">复制的微信号</th>
<th scope="col">浏览日期</th>
<th scope="col">用户地区</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in search(keywords)" :key="item.id">
<td>{{ i+1 }}</td>
<td>{{ item.ip }}</td>
<td>{{ item.route }}</td>
<td>{{ item.copy }}</td>
<td>{{ item.date }}</td>
<td>{{ item.address }}</td>
<td><a class="btn btn-danger" style="color: #fff" :href="url_mysql(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
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<data.length;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);
</script>