当前位置：首页 > VUE

vue实现检索效果

2026-03-29 12:34:39VUE

Vue 实现检索功能的方法

数据绑定与输入监听 在 Vue 中可以通过 v-model 绑定输入框的值，并使用 @input 或 @change 事件监听用户输入。例如：

<template>
  <input v-model="searchQuery" @input="handleSearch" placeholder="输入关键词...">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 原始数据
      filteredItems: [] // 筛选结果
    }
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

计算属性优化 对于简单的检索逻辑，可以使用计算属性自动响应数据变化：

vue实现检索效果

<script>
export default {
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

异步搜索实现 当需要从接口获取搜索结果时，可以使用防抖函数优化性能：

vue实现检索效果

import { debounce } from 'lodash'

export default {
  methods: {
    handleSearch: debounce(function() {
      axios.get('/api/search', { params: { q: this.searchQuery } })
        .then(response => this.filteredItems = response.data)
    }, 500)
  }
}

高级检索功能 对于复杂检索需求，可以结合正则表达式或多字段匹配：

filteredItems() {
  const query = this.searchQuery.toLowerCase()
  return this.items.filter(item => 
    Object.values(item).some(
      value => String(value).toLowerCase().includes(query)
    )
  )
}

第三方库集成 对于大型项目，可以考虑集成专业搜索库如 Fuse.js：

import Fuse from 'fuse.js'

export default {
  mounted() {
    this.fuse = new Fuse(this.items, {
      keys: ['name', 'description'],
      threshold: 0.4
    })
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.searchQuery 
        ? this.fuse.search(this.searchQuery).map(r => r.item)
        : this.items
    }
  }
}