vue vue搜索 vue模糊搜索

1、使用vue来实现一般搜索

<form action="" @submit="submitQuery" class="all_two">
     <el-input v-model="input" placeholder="请输入内容" ref="search" style="width:300px;"></el-input>
</form>
<div class="all_three">
      <div v-for="item in this.$store.state.chufang.alldata">
            <div v-for="item1 in queryDate(item.cabinet)" >
                 <input type="checkbox" name="checkbox"  value="checkbox" style="zoom:200%;" :checked="item1.checks==0? true:false">
                 <span>{{item1.name}}</span>
            </div>
       </div>
</div>

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模糊搜索，原理都是一样的

 <el-form :inline="true" :model="formInline" class="demo-form-inline mt15">
      <el-form-item>
          <el-input v-model="formInline.name" ref="search"   placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
           <el-input v-model="formInline.phone" ref="search1"  placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item>
            <el-button type="primary" @click="onSubmit">筛选</el-button>
      </el-form-item>
 </el-form>

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
                }
           })
        }
},