vue 根据关键词，在已查询回来的接口中筛选数据，不用根据关键字一遍遍改变，一次次调接口的烦恼

这个问题间接也相当于匹配的问题吧，这样既避免重复调接口出现问题，提升了程序的运行效率，另外，真的特别特别的好用！！

之前也一直知道这个方法，但是从来没自己写过这类型的方法。还一直在用老旧的方法（监听关键词变化，重复调接口），当时的自己还觉得特别好用，但其实是占用了很多运行空间，这次恰巧不巧的必须使用根据关键词匹配去筛选数据的问题，就来分享一下吧。

话不多说上代码

<label>
     <input type  = "text" v-model = "keywords">
</label>

这个是你输入关键字的位置

<tbody>
   <tr v-for = "item in search(keywords)">
       <td>{{item.id}}</td>
       <td>{{item.name}}</td>
  </tr>
</tbody>

这个是你筛选完关键字需要显示的地方，search(keywords)是一个筛选的方法

data(){
    return{
         list :[{id=1,name="chi"},{id=2,name="wan"}]
   } 
},
methods{
     search(keywords){
             var newList = []
             this.list.forEach(item => {
                    if (item.name.indexOf(keywords) ! = -1){
                                    newList.push(item)
                        }
            }) 
            return newList
       }
}

这个list是所有数据，search方法是将筛选后的数据存到newList中，并且返回

其中item.name.indexOf(keywords)是根据list中的name进行筛选，如果想根据别的进行筛选自己换就可以啦

但这样会有一个问题，如果我们想要在newList没有数据时，不显示整个表格，这样做的话，筛选条件我们就没有办法写了

我对他进行了改善，是以下代码

<tbody>
 <div v-if="(resultList.length > 0)">
   <tr v-for = "item in resultList">
       <td>{{item.id}}</td>
       <td>{{item.name}}</td>
  </tr>
 </div>
</tbody>

data(){
    return{
         list :[{id=1,name="chi"},{id=2,name="wan"}],
         resultList:[],
   } 
},
watch:{
    keywords(newVal){
        this.resultList = search(newVal)
    }
},
methods{
     search(keywords){
             var newList = []
             this.list.forEach(item => {
                    if (item.name.indexOf(keywords) ! = -1){
                                    newList.push(item)
                        }
            }) 
            return newList
       }
}

如此的话是不是也很方便呢！如此的话，可以根据你自己需要的显示的类型，进行匹配。

如果有问题的话可以留言交流呀~