当前位置：首页 > VUE

vue模糊查询怎么实现

2026-02-20 20:34:46VUE

Vue模糊查询的实现方法

使用计算属性实现模糊查询

在Vue中，可以通过计算属性结合JavaScript的filter和includes方法实现模糊查询。这种方法适用于前端数据量不大的情况。

data() {
  return {
    searchText: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchText.toLowerCase())
    )
  }
}

模板部分可以这样使用：

vue模糊查询怎么实现

<input v-model="searchText" placeholder="Search...">
<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

使用第三方库实现更强大搜索

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

import Fuse from 'fuse.js'

data() {
  return {
    searchText: '',
    items: [...],
    fuse: null
  }
},
created() {
  this.fuse = new Fuse(this.items, {
    keys: ['name'],
    threshold: 0.4
  })
},
computed: {
  filteredItems() {
    if (!this.searchText) return this.items
    return this.fuse.search(this.searchText).map(result => result.item)
  }
}

后端API实现模糊查询

当数据量较大时，应该将模糊查询逻辑放在后端处理：

vue模糊查询怎么实现

methods: {
  async searchItems() {
    try {
      const response = await axios.get('/api/items', {
        params: {
          search: this.searchText
        }
      })
      this.filteredItems = response.data
    } catch (error) {
      console.error(error)
    }
  }
},
watch: {
  searchText(newVal) {
    this.searchItems()
  }
}

优化搜索体验

为了提高搜索体验，可以添加防抖功能避免频繁触发搜索：

import debounce from 'lodash.debounce'

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

多字段模糊查询

如果需要同时搜索多个字段，可以扩展过滤逻辑：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
      item.description.toLowerCase().includes(this.searchText.toLowerCase())
    )
  }
}

以上方法可以根据具体需求选择使用，对于小型应用前端实现即可，大型应用建议结合后端API实现。