当前位置：首页 > VUE

vue实现检索效果

2026-02-17 12:50:27VUE

Vue 实现检索功能

核心思路
通过 Vue 的响应式特性，结合计算属性或方法，实时过滤数据列表。通常需要以下关键步骤：

数据绑定与输入监听
在模板中使用 v-model 绑定搜索输入框，监听用户输入：

<template>
  <input v-model="searchQuery" placeholder="输入关键词搜索">
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

计算属性实现过滤
使用 computed 根据搜索词动态过滤数组：

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

高级优化方案

防抖处理
频繁输入时通过防抖减少计算次数（使用 Lodash 或自定义）：

import { debounce } from 'lodash';

methods: {
  handleSearch: debounce(function() {
    this.filteredList = this.originalList.filter(item => 
      item.name.includes(this.searchQuery)
    )
  }, 300)
}

多字段搜索
扩展过滤逻辑支持多个字段匹配：

computed: {
  filteredList() {
    const query = this.searchQuery.toLowerCase()
    return this.originalList.filter(item => 
      ['name', 'category'].some(field => 
        String(item[field]).toLowerCase().includes(query)
      )
    )
  }
}

服务端搜索集成

API 请求示例
当数据量较大时，改用后端搜索接口：

methods: {
  async fetchResults() {
    const res = await axios.get('/api/search', {
      params: { keyword: this.searchQuery }
    })
    this.filteredList = res.data
  }
}

注意事项