vue实现本地模糊查询

使用watch侦听输入框

<template>
  <div>
     <a-input placeholder="请输入" v-model="query" />
     <ul v-if="query == ''">
       <li v-for="item in tableData" :key="item.id">{{item.name}}</li>
     </ul>
     <ul v-else>
       <li v-for="item in filterData" :key="item.id">{{item.name}}</li>
     </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      query:'',
      tableData:[
        {
          id:1,
          name:'河北'
        },
        {
          id:2,
          name:'北京'
        },
        {
          id:3,
          name:'湖北'
        },
         {
          id:4,
          name:'南京'
        }
      ],
      filterData:[]
    }
  },
  watch:{
    query:{
      immediate:true,
      handler(val){
        this.filterData = this.tableData.filter(item=>{
          return item.name.indexOf(val) != -1
        })
      }
    }
  }
}
</script>