当前位置：首页 > VUE

vue 实现搜索功能

2026-01-16 07:00:39VUE

实现搜索功能的基本思路

在Vue中实现搜索功能通常涉及以下几个核心步骤：监听用户输入、过滤数据列表、动态更新视图。以下是具体实现方法。

监听用户输入

使用v-model双向绑定搜索框的输入值，实时获取用户输入的关键词。示例代码：

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

<script>
export default {
  data() {
    return {
      searchQuery: ''
    };
  }
};
</script>

过滤数据列表

通过计算属性computed对原始数据进行过滤，匹配关键词。假设有一个items数组需要搜索：

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

渲染过滤结果

在模板中直接使用计算属性filteredItems渲染过滤后的列表：

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

处理复杂搜索逻辑

若需多字段搜索或复杂条件，可在计算属性中扩展逻辑。例如同时搜索name和description字段：

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

使用第三方库优化性能

对于大数据量搜索，可考虑使用lodash的_.debounce减少计算频率：

import { debounce } from 'lodash';

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

结合后端API搜索

若数据来自后端，可通过API传递关键词并获取结果：

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

样式与交互优化

添加加载状态和空结果提示，提升用户体验：

vue 实现搜索功能

<template>
  <input v-model="searchQuery" placeholder="搜索..." />
  <div v-if="isLoading">加载中...</div>
  <div v-else-if="filteredItems.length === 0">无匹配结果</div>
  <ul v-else>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

以上方法覆盖了从简单到复杂的搜索场景，可根据实际需求选择或组合使用。