当前位置：首页 > VUE

vue实现产品搜索

2026-03-07 21:30:46VUE

实现产品搜索功能

在Vue中实现产品搜索功能，可以通过以下步骤完成：

1. 创建搜索组件 创建一个搜索框组件，包含输入框和搜索按钮。使用v-model绑定输入值。

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      placeholder="搜索产品..."
      @keyup.enter="searchProducts"
    />
    <button @click="searchProducts">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    searchProducts() {
      this.$emit('search', this.searchQuery)
    }
  }
}
</script>

2. 产品列表组件 创建一个产品列表组件，接收过滤后的产品数据并渲染。

<template>
  <div class="product-list">
    <div v-for="product in filteredProducts" :key="product.id" class="product-item">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <p>价格: {{ product.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    filteredProducts: Array
  }
}
</script>

3. 主组件整合 在主组件中整合搜索和列表功能，实现搜索逻辑。

<template>
  <div>
    <search-bar @search="handleSearch" />
    <product-list :filteredProducts="filteredProducts" />
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'
import ProductList from './ProductList.vue'

export default {
  components: {
    SearchBar,
    ProductList
  },
  data() {
    return {
      products: [
        { id: 1, name: '产品A', description: '描述A', price: 100 },
        { id: 2, name: '产品B', description: '描述B', price: 200 }
      ],
      searchQuery: '',
      filteredProducts: []
    }
  },
  created() {
    this.filteredProducts = this.products
  },
  methods: {
    handleSearch(query) {
      this.searchQuery = query.toLowerCase()
      this.filteredProducts = this.products.filter(product => 
        product.name.toLowerCase().includes(this.searchQuery) ||
        product.description.toLowerCase().includes(this.searchQuery)
      )
    }
  }
}
</script>

4. 优化搜索性能 对于大量数据，可以使用防抖技术优化搜索性能。

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    this.searchQuery = query.toLowerCase()
    this.filteredProducts = this.products.filter(product => 
      product.name.toLowerCase().includes(this.searchQuery) ||
      product.description.toLowerCase().includes(this.searchQuery)
    )
  }, 300)
}

5. 添加空状态提示 当没有搜索结果时，显示友好提示。

<template>
  <div class="product-list">
    <div v-if="filteredProducts.length === 0" class="no-results">
      没有找到匹配的产品
    </div>
    <div v-else v-for="product in filteredProducts" :key="product.id" class="product-item">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <p>价格: {{ product.price }}</p>
    </div>
  </div>
</template>

6. 样式美化 添加基本CSS样式提升用户体验。

vue实现产品搜索

.search-container {
  margin: 20px 0;
}

input {
  padding: 8px;
  width: 300px;
}

button {
  padding: 8px 16px;
  margin-left: 10px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
}

.no-results {
  padding: 20px;
  text-align: center;
  color: #666;
}