当前位置：首页 > VUE

vue实现列表搜索

2026-02-20 13:59:43VUE

Vue实现列表搜索功能

在Vue中实现列表搜索功能通常涉及以下几个核心步骤：

数据绑定与搜索输入

创建一个输入框用于接收用户搜索关键词，使用v-model实现双向绑定：

<input v-model="searchQuery" placeholder="搜索..." />

计算属性过滤列表

利用Vue的计算属性实现实时过滤，避免直接修改原始数据：

computed: {
  filteredList() {
    return this.originalList.filter(item => {
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

列表渲染

使用v-for渲染过滤后的列表：

<ul>
  <li v-for="item in filteredList" :key="item.id">
    {{ item.name }}
  </li>
</ul>

多字段搜索实现

当需要搜索多个字段时，可扩展过滤逻辑：

computed: {
  filteredList() {
    const query = this.searchQuery.toLowerCase()
    return this.originalList.filter(item => {
      return (
        item.name.toLowerCase().includes(query) ||
        item.description.toLowerCase().includes(query)
      )
    })
  }
}

使用第三方库优化

对于大型数据集，可以考虑使用lodash的防抖函数优化性能：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

完整组件示例

<template>
  <div>
    <input 
      v-model="searchQuery"
      @input="handleSearch($event.target.value)"
      placeholder="搜索..."
    />
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }} - {{ item.description }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      originalList: [
        { id: 1, name: '苹果', description: '水果' },
        { id: 2, name: '香蕉', description: '热带水果' }
      ]
    }
  },
  computed: {
    filteredList() {
      const query = this.searchQuery.toLowerCase()
      return this.originalList.filter(item => {
        return (
          item.name.toLowerCase().includes(query) ||
          item.description.toLowerCase().includes(query)
        )
      })
    }
  }
}
</script>

服务器端搜索实现

当数据量很大时，建议改为调用API进行服务器端搜索：

vue实现列表搜索

methods: {
  async searchItems() {
    const response = await axios.get('/api/items', {
      params: { q: this.searchQuery }
    })
    this.filteredList = response.data
  }
}