69、vue实现输入框的模糊查找

一、思路：

为输入框添加@input事件，输入内容时触发响应的方法。该方法在数据库中匹配输入的内容，将匹配的数据存储到列表展示出来。

1. 为输入框添加@input事件，并通过v-model绑定数据。当输入内容时，触发@input中的事件search。

2. showList数组中存储了匹配到的数据，用于展示

 3. 用到的数据项

 实现的效果图：

 

 

二：完整代码：

<template>
  <div>
    <el-input v-model="inputData" @input="search()"></el-input>
    <p v-for="value in showList" :key="value">
      {{value}}
    </p>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  data() {
    return {
      inputData:"", //输入的数据
      list:['a','ab','abc','abcd','abcdef','abcdefg','abcdefgh'], //用于匹配的数据
      showList:[] //存放匹配的结果
    };
  },
  methods: {
    search(){ //输入内容时触发
      this.showList=[]; //先清空，存放当前搜索的匹配结果
      for(let value of this.list){ // 在list中寻找与输入内容inputData匹配的内容
        if(value.indexOf(this.inputData)!==-1){ //若匹配则存到对应的数组中
          Vue.set(this.showList,this.showList.length,value);
        }
      }
    }
  }
};
</script>
<style scoped>
</style>