当前位置：首页 > VUE

vue搜索功能实现

2026-02-10 18:29:44VUE

Vue 搜索功能实现

基本搜索功能实现

在 Vue 中实现搜索功能通常需要结合 v-model 和计算属性（computed）或方法（methods）来过滤数据。以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      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.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

使用 Lodash 进行防抖优化

频繁触发搜索可能导致性能问题，可以使用 Lodash 的 debounce 方法优化：

import debounce from 'lodash/debounce';

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      debouncedSearch: null
    };
  },
  created() {
    this.debouncedSearch = debounce(this.searchItems, 300);
  },
  methods: {
    searchItems() {
      // 调用 API 或过滤本地数据
    }
  },
  watch: {
    searchQuery() {
      this.debouncedSearch();
    }
  }
};

结合 API 请求实现远程搜索

如果需要从后端获取搜索结果，可以使用 axios 或其他 HTTP 客户端：

export default {
  methods: {
    async searchItems() {
      try {
        const response = await axios.get('/api/items', {
          params: { search: this.searchQuery }
        });
        this.items = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};

高级搜索功能

对于更复杂的搜索需求，可以结合多个条件：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase());
      const matchesCategory = this.selectedCategory ? item.category === this.selectedCategory : true;
      return matchesSearch && matchesCategory;
    });
  }
}

使用 Vuex 管理搜索状态

在大型应用中，可以使用 Vuex 集中管理搜索状态：

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: '',
    items: []
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
      );
    }
  },
  mutations: {
    setSearchQuery(state, query) {
      state.searchQuery = query;
    }
  }
});

使用第三方搜索库

对于更专业的搜索需求，可以考虑集成第三方库如 Fuse.js：

import Fuse from 'fuse.js';

export default {
  data() {
    return {
      fuse: null,
      searchQuery: '',
      items: []
    };
  },
  mounted() {
    this.fuse = new Fuse(this.items, {
      keys: ['name', 'description'],
      threshold: 0.3
    });
  },
  computed: {
    searchResults() {
      return this.searchQuery ? this.fuse.search(this.searchQuery) : this.items;
    }
  }
};

这些方法可以根据具体需求进行组合和调整，实现从简单到复杂的各种搜索功能。

vue搜索功能实现