当前位置：首页 > VUE

使用vue实现模糊查询

2026-02-21 11:57:19VUE

使用 Vue 实现模糊查询

数据准备

确保有一个数据数组和一个用于存储搜索结果的数组。数据可以来自本地或 API 调用。

data() {
  return {
    items: ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango'],
    searchQuery: '',
    filteredItems: []
  }
}

监听搜索输入

使用 v-model 绑定输入框的值到 searchQuery，并通过 watch 或计算属性监听变化。

使用vue实现模糊查询

watch: {
  searchQuery(newVal) {
    this.filterItems(newVal)
  }
}

实现模糊查询逻辑

使用 JavaScript 的字符串方法或正则表达式进行模糊匹配。以下是一个简单的不区分大小写的匹配示例：

methods: {
  filterItems(query) {
    if (!query) {
      this.filteredItems = this.items
      return
    }
    this.filteredItems = this.items.filter(item =>
      item.toLowerCase().includes(query.toLowerCase())
    )
  }
}

渲染搜索结果

在模板中显示搜索结果，使用 v-for 遍历 filteredItems。

使用vue实现模糊查询

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <ul>
      <li v-for="item in filteredItems" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

优化性能

对于大数据量，可以使用防抖（debounce）减少频繁触发搜索。

import { debounce } from 'lodash'

methods: {
  filterItems: debounce(function(query) {
    if (!query) {
      this.filteredItems = this.items
      return
    }
    this.filteredItems = this.items.filter(item =>
      item.toLowerCase().includes(query.toLowerCase())
    )
  }, 300)
}

使用第三方库增强功能

如果需要更复杂的模糊匹配（如权重、拼音搜索），可以使用 Fuse.js 等库。

import Fuse from 'fuse.js'

methods: {
  setupFuse() {
    const options = {
      keys: ['name'],
      threshold: 0.4
    }
    this.fuse = new Fuse(this.items, options)
  },
  filterItems(query) {
    if (!query) {
      this.filteredItems = this.items
      return
    }
    this.filteredItems = this.fuse.search(query).map(result => result.item)
  }
}