vue搜索和vue模糊搜索代码实例

   
      
  
  {{item1.name}}
      
    

submitQuery:function(){
  this.query = this.$refs.search.value.trim();
},

queryDate:function(list){
   if (this.query === '') {
     return list
   } 
   return list.filter((item)=>{
     if(item.name.indexOf(this.query) != -1){
      return item;
     }
   })
},

2、vue模糊搜索，原理都是一样的

   
     
   
   
      
   
   
      筛选
   
 

onSubmit() {
   this.query = this.$refs.search.value.trim();
   this.query1 = this.$refs.search1.value.trim();
},
queryDate:function(list){
   if (this.query === '' && this.query1 === '') {
     return list
   } 
   else if (this.query !== '' && this.query1 === '') {
     return list.filter(item => {
if (item.name.indexOf(this.query) !== -1) {
  return item
 }
     })
    } 
    else if (this.query === '' && this.query1 !== '') {
     return list.filter(item => {
 if (item.mobile.indexOf(this.query1) !== -1) {
   return item
  }
      })
    } 
    else if (this.query !== '' && this.query1 !== '') {
      return list.filter(item => {
 if (item.name.indexOf(this.query) !== -1 && item.mobile.indexOf(this.query1) !== -1) {
   return item
 }
      })
    }
},

以上所述是小编给大家介绍的vue搜索和vue模糊搜索详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！