【Vue.filter】vue検索vueファジイ検索(方法一)

1、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公式サイト https://cn.vuejs.org/v2/guide/