效果图
20181009105633.png
1、实现方式一, v-on:input(缺点是：每次按一次键盘，都会触发一次，无论输入框里面的值有没有变化)
html
<input type="text" id="cardsNum2" v-model="searchVal" value="1" v-on:input ="inputFunc">
js
//fuzzy_search() 调取模糊搜索的方法
inputFunc:function(){
if(this.searchVal.trim()){
this.fuzzy_search(this.searchVal.trim());
}
}
2、实时监控searchVal的值，使用watch方法
html
<input type="text" id="cardsNum2" v-model="searchVal" value="1"v-on:focus="focus()">
js
//fuzzy_list 为通过接口获得的模糊搜索的列表
methods:{
focus:function(){
if(document.querySelector('input')==document.activeElement){
this.fuzzy_search(this.searchVal.trim());
}
},
fuzzy_search:function(value){
var that =this;
if(!value){
that.fuzzy_list=[];
return;
}
//调取接口
},
},
watch:{
searchVal:function(){
this.focus();
},
}
