当前位置：首页 > VUE

实现模糊查询vue

2026-02-20 08:04:13VUE

实现模糊查询的方法

在Vue中实现模糊查询通常需要结合输入框和列表渲染功能，利用JavaScript的字符串方法或正则表达式进行匹配。以下是几种常见的方法：

使用v-model和filter方法

通过v-model绑定输入框的值，利用数组的filter方法筛选匹配项。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用正则表达式增强模糊匹配

如果需要更灵活的模糊匹配，可以使用正则表达式。

computed: {
  filteredItems() {
    const query = this.searchQuery.toLowerCase()
    return this.items.filter(item => {
      const regex = new RegExp(query.split('').join('.*'), 'i')
      return regex.test(item.name)
    })
  }
}

使用第三方库实现高级模糊搜索

对于更复杂的模糊搜索需求，可以使用Fuse.js等专门库。

import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      items: [...],
      fuse: null
    }
  },
  created() {
    this.fuse = new Fuse(this.items, {
      keys: ['name'],
      includeScore: true
    })
  },
  computed: {
    filteredItems() {
      if (!this.searchQuery) return this.items
      return this.fuse.search(this.searchQuery).map(result => result.item)
    }
  }
}

添加防抖优化性能

频繁的搜索输入可能影响性能，可以添加防抖功能。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      debouncedSearch: ''
    }
  },
  watch: {
    searchQuery: debounce(function(newVal) {
      this.debouncedSearch = newVal
    }, 300)
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.debouncedSearch.toLowerCase())
      )
    }
  }
}

以上方法可以根据具体需求选择使用，从简单到复杂提供了多种实现模糊查询的解决方案。

实现模糊查询vue