Vue实现模糊查询

<template>
  <div>
    <input v-model="searchTerm" placeholder="输入关键词进行模糊查询">
    
    <ul>
      <li v-for="item in filteredData" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      data: [
        'apple',
        'banana',
        'grape',
        'kiwi',
        'melon',
        'orange',
        'pear'
      ]
    };
  },
  computed: {
    filteredData() {
      const query = this.searchTerm.toLowerCase();
      
      if (!query) {
        return this.data;
      }
      
      return this.data.filter(item => {
        return item.toLowerCase().includes(query);
      });
    }
  }
};
</script>

输入框通过v-model指令绑定到searchTerm属性，这样当输入框的值发生变化时，searchTerm属性也会随之更新。

在computed计算属性中，我们定义了filteredData计算属性来根据searchTerm对data进行过滤。如果searchTerm为空，即没有进行模糊查询，则直接返回原始的data数组；否则，使用filter()方法对每个数据项进行模糊匹配。

在模板中，我们使用v-for指令在列表中渲染过滤后的数据，并为每个列表项设置一个唯一的key属性。

当用户输入关键词时，searchTerm属性会更新，并触发filteredData计算属性的重新计算，从而动态更新列表的内容。