当前位置：首页 > VUE

vue实现产品搜索

2026-03-28 07:40:36VUE

Vue实现产品搜索功能

构建搜索组件 在Vue项目中创建一个独立的搜索组件，使用v-model绑定输入框的值。通过@input或@keyup事件触发搜索逻辑。

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @input="handleSearch" 
      placeholder="搜索产品..."
    />
    <ul v-if="filteredProducts.length">
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

数据处理逻辑 在组件中定义搜索方法和数据。使用计算属性或方法过滤产品列表，实现实时搜索效果。

vue实现产品搜索

<script>
export default {
  data() {
    return {
      searchQuery: '',
      products: [], // 从API或props获取
      filteredProducts: []
    }
  },
  methods: {
    handleSearch() {
      this.filteredProducts = this.products.filter(product => 
        product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

集成API请求 如果产品数据需要从后端获取，在created或mounted生命周期钩子中调用API。

async created() {
  try {
    const response = await axios.get('/api/products')
    this.products = response.data
  } catch (error) {
    console.error('获取产品失败:', error)
  }
}

优化搜索性能 添加防抖函数避免频繁触发搜索，提升性能。使用lodash的_.debounce或自定义实现。

vue实现产品搜索

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    // 搜索逻辑
  }, 300)
}

样式增强 为搜索组件添加基础样式，改善用户体验。包括输入框样式、结果列表样式和空状态提示。

<style scoped>
.search-container {
  position: relative;
}
input {
  padding: 8px 12px;
  width: 100%;
}
ul {
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}
li {
  padding: 8px;
  background: white;
  border-bottom: 1px solid #eee;
}
</style>

高级搜索功能 扩展搜索范围到产品描述、分类等字段，或实现多条件筛选。

filteredProducts() {
  return this.products.filter(product => {
    const query = this.searchQuery.toLowerCase()
    return (
      product.name.toLowerCase().includes(query) ||
      product.description.toLowerCase().includes(query) ||
      product.category.toLowerCase().includes(query)
    )
  })
}