当前位置：首页 > VUE

vue实现模糊查询

2026-02-19 12:32:30VUE

实现模糊查询的基本思路

在Vue中实现模糊查询通常涉及监听用户输入、处理数据匹配和动态渲染结果。核心逻辑是对比输入值与数据源的字符串相似度，常用方法包括字符串包含判断或正则表达式匹配。

基于字符串包含的简单实现

通过v-model绑定输入框，使用filter和includes方法筛选数据：

<template>
  <div>
    <input v-model="searchText" placeholder="输入关键词">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      fullList: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.fullList.filter(item => 
        item.name.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  }
}
</script>

使用正则表达式实现高级匹配

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

computed: {
  filteredList() {
    const pattern = new RegExp(this.searchText, 'i')
    return this.fullList.filter(item => pattern.test(item.name))
  }
}

第三方库辅助搜索

对于复杂场景（如拼音搜索、权重匹配），可引入第三方库如fuse.js：

安装依赖：
```
npm install fuse.js
```
在组件中使用：
```
import Fuse from 'fuse.js'
```

export default { data() { return { fuse: null, searchText: '', fullList: [/ 数据 /] } }, mounted() { this.fuse = new Fuse(this.fullList, { keys: ['name', 'pinyin'], // 可搜索的字段 threshold: 0.4 // 匹配阈值 }) }, computed: { filteredList() { return this.searchText ? this.fuse.search(this.searchText).map(r => r.item) : this.fullList } } }


### 性能优化建议
大数据量时考虑防抖处理，避免频繁计算：

```javascript
import { debounce } from 'lodash'

export default {
  methods: {
    handleSearch: debounce(function() {
      // 搜索逻辑
    }, 300)
  }
}

多字段联合搜索

需要同时匹配多个属性时，扩展过滤逻辑：

vue实现模糊查询

filteredList() {
  return this.fullList.filter(item => {
    const searchContent = `${item.name}${item.desc}`.toLowerCase()
    return searchContent.includes(this.searchText.toLowerCase())
  })
}