当前位置：首页 > VUE

vue实现产品搜索

2026-01-08 06:33:59VUE

实现产品搜索功能

在Vue中实现产品搜索功能需要结合前端界面和后端数据处理。以下是实现的基本思路和代码示例：

数据准备

创建一个产品数据数组，包含需要搜索的产品信息：

data() {
  return {
    products: [
      { id: 1, name: '智能手机', category: '电子', price: 2999 },
      { id: 2, name: '笔记本电脑', category: '电子', price: 5999 },
      { id: 3, name: '运动鞋', category: '服装', price: 399 }
    ],
    searchQuery: ''
  }
}

搜索逻辑实现

使用计算属性实现实时搜索功能：

vue实现产品搜索

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

模板部分

创建搜索输入框和结果显示列表：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="搜索产品..."
      class="search-input"
    />

    <ul v-if="filteredProducts.length">
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - {{ product.category }} - ¥{{ product.price }}
      </li>
    </ul>

    <p v-else>没有找到匹配的产品</p>
  </div>
</template>

高级搜索功能

对于更复杂的搜索需求，可以添加搜索过滤器：

vue实现产品搜索

data() {
  return {
    filters: {
      category: '',
      minPrice: 0,
      maxPrice: Infinity
    }
  }
}

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

      const matchesFilters = (
        (this.filters.category === '' || 
         product.category === this.filters.category) &&
        product.price >= this.filters.minPrice &&
        product.price <= this.filters.maxPrice
      )

      return matchesSearch && matchesFilters
    })
  }
}

与后端API集成

实际项目中通常需要从后端API获取数据：

methods: {
  async searchProducts() {
    try {
      const response = await axios.get('/api/products', {
        params: {
          q: this.searchQuery,
          category: this.filters.category,
          min_price: this.filters.minPrice,
          max_price: this.filters.maxPrice
        }
      })
      this.products = response.data
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
}

性能优化

对于大量数据，可以考虑添加防抖功能：

data() {
  return {
    debounceTimeout: null
  }
},
methods: {
  handleSearch() {
    clearTimeout(this.debounceTimeout)
    this.debounceTimeout = setTimeout(() => {
      this.searchProducts()
    }, 300)
  }
}

以上实现可以根据实际项目需求进行调整和扩展，如添加分页、排序等功能。