当前位置：首页 > VUE

vue模糊查询的实现

2026-02-24 04:14:28VUE

实现模糊查询的方法

在Vue中实现模糊查询通常需要结合输入框的监听和数据处理逻辑。以下是几种常见的实现方式：

使用计算属性实现

计算属性可以基于输入的关键词实时过滤数据：

vue模糊查询的实现

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

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

使用watch实现

当需要更复杂的逻辑或异步操作时，可以使用watch：

data() {
  return {
    searchQuery: '',
    items: [...],
    filteredItems: []
  }
},
watch: {
  searchQuery(newVal) {
    const query = newVal.toLowerCase()
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(query)
    )
  }
}

使用第三方库实现

对于更高级的模糊搜索，可以使用Fuse.js等专门库：

vue模糊查询的实现

import Fuse from 'fuse.js'

computed: {
  fuse() {
    return new Fuse(this.items, {
      keys: ['name'],
      threshold: 0.4
    })
  },
  filteredItems() {
    return this.searchQuery 
      ? this.fuse.search(this.searchQuery).map(r => r.item)
      : this.items
  }
}

优化性能

对于大数据集，可以添加防抖处理：

import { debounce } from 'lodash'

methods: {
  search: debounce(function(query) {
    // 搜索逻辑
  }, 300)
}

多字段搜索

扩展模糊查询到多个字段：

filteredItems() {
  const query = this.searchQuery.toLowerCase()
  return this.items.filter(item =>
    item.name.toLowerCase().includes(query) ||
    item.description.toLowerCase().includes(query)
  )
}

以上方法可以根据具体需求选择或组合使用，实现不同复杂度的模糊查询功能。