使用vue实现模糊查询

实现模糊查询的基本思路

在Vue中实现模糊查询通常需要结合输入框的监听、数据处理和过滤逻辑。核心步骤包括监听用户输入、处理输入内容、过滤数据列表以及渲染结果。

监听用户输入

使用v-model双向绑定输入框的值，配合@input或watch监听输入变化：

<template>
  <input v-model="searchText" placeholder="输入关键词搜索" />
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      rawData: ["苹果", "香蕉", "橙子", "西瓜"], // 原始数据
      filteredData: [] // 过滤后的结果
    };
  },
  watch: {
    searchText(newVal) {
      this.filterData(newVal);
    }
  }
};
</script>

实现过滤逻辑

使用JavaScript的字符串方法或正则表达式进行模糊匹配。常见方法包括includes()、indexOf()或正则表达式的test()：

methods: {
  filterData(keyword) {
    if (!keyword) {
      this.filteredData = [...this.rawData];
      return;
    }
    this.filteredData = this.rawData.filter(item => 
      item.toLowerCase().includes(keyword.toLowerCase())
    );
  }
}

渲染过滤结果

通过v-for展示过滤后的数据列表：

<template>
  <ul>
    <li v-for="(item, index) in filteredData" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

使用计算属性优化性能

对于小型数据集，可以用计算属性替代watch，避免手动触发过滤：

computed: {
  filteredData() {
    const keyword = this.searchText.toLowerCase();
    return this.rawData.filter(item => 
      item.toLowerCase().includes(keyword)
    );
  }
}

高级模糊搜索（正则表达式）

如果需要更灵活的匹配（如忽略大小写、部分匹配），可使用正则表达式：

methods: {
  filterData(keyword) {
    const regex = new RegExp(keyword, 'i'); // 'i'表示忽略大小写
    this.filteredData = this.rawData.filter(item => regex.test(item));
  }
}

结合第三方库（如Fuse.js）

对于复杂场景（如权重匹配、错别字容错），可使用模糊搜索库：

1. 安装Fuse.js：

   

   npm install fuse.js

2. 在Vue中使用：

   
   import Fuse from 'fuse.js';

export default { data() { return { fuse: null, options: { // 配置搜索选项 keys: ['name'], // 搜索的字段 threshold: 0.4 // 匹配阈值 } }; }, created() { this.fuse = new Fuse(this.rawData, this.options); }, methods: { filterData(keyword) { this.filteredData = keyword ? this.fuse.search(keyword).map(r => r.item) : [...this.rawData]; } } };

### 处理异步数据

如果数据来自API请求，需在获取数据后初始化搜索逻辑：

```javascript
async created() {
  const res = await axios.get('/api/data');
  this.rawData = res.data;
  this.filteredData = [...this.rawData];
}

防抖优化性能

频繁输入时通过防抖减少计算次数：

import { debounce } from 'lodash';

methods: {
  filterData: debounce(function(keyword) {
    // 过滤逻辑
  }, 300)
}

样式与交互增强

添加加载状态和空结果提示：

<template>
  <div v-if="loading">搜索中...</div>
  <div v-else-if="filteredData.length === 0">无匹配结果</div>
</template>