{ id: "1103", name: "晓丽", time: "20170304" },
{ id: "1104", name: "小兰", time: "20170112" },
{ id: "1205", name: "财务", time: "20170203" },
{ id: "1206", name: "嘻嘻", time: "20170208" },
{ id: "1307", name: "测试", time: "20170201" }
],
list:[] },
methods:{//触发keyup事件之后触发的方法
search(){
//这个变量主要是用来测试节流后和不节流的区别
var i=0;
console.log(i++);
//定义的新数组存放筛选之后的数据
this.list=[];
//拿到当前input输入框输入的值
this.input_value=this.$refs.input.value;
//判断展示ul列表，如果输入了就展示没输入就不展示
if(this.input_value.length>0){
this.state=true;
}else{
this.state=false;
}
//循环模拟数据的数组
this.dataList.map((msg)=>{
//拿当前json的id、name、time去分别跟输入的值进行比较
//indexOf 如果在检索的字符串中没有出现要找的值是会返回-1的，所以我们这里不等于-1就是假设输入框的值在当前json里面找到的情况
if(msg.id.indexOf(this.input_value)!=-1 || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){
//然后把当前json添加到list数组中
this.list.push(msg);
}
})
},
}
})
js数据逻辑层代码其实不难，主要就是给input绑定了keyup事件，在用户输入的时候会触发search事件，用户每输入一个字符都会触发一次；然后我们通过this.$refs.input.value来获取输入框当前的值并赋值给变量this.input_value，然后我们对this.input_value的长度进行判断来实现对用户是否输入的判断，如果用书输入了我们就把v-show绑定的值state赋值给true，反之则赋值为false；然后我们来用ES6的map方法来循环我们的dataList数组，dataList数组的数据是模拟后台接口数据，通过indexOf方法是否等于-1来进行判断当前json里面是否有输入框中输入的数组，indexOf是javascript提供的操作字符串方法，调用方式：string.indexOf(“要查询的值”)，如果str中没有要查询的值会返回我们-1，如果有会直接返回给我们查询数据的当前下标；所以我们可以借助indexOf是否等于-1来进行判断当前json中是否有我们要查询的字符串；如果有的话，我们只需要把当前json添加到空数组list中即可，然后li绑定list展示；
效果图如下：
到这里我们就可以看到我们要的模糊查询功能已经实现了，但是我们上面讲到模糊查询会影响浏览器的性能，从控制台输入的变量i的值可以看到我们的search方法已经被调用了8次，我们输入的字符越长被调用的次数越多，如果方法里面有操作DOM的行为性能影响会更严重；所以我们现在来加上节流函数来看看：
