当前位置：首页 > VUE

vue实现搜索商品

2026-01-15 07:00:09VUE

Vue 实现商品搜索功能

在 Vue 中实现商品搜索功能，可以通过以下步骤完成。假设已有商品列表数据，需要实现前端搜索过滤功能。

数据准备

准备商品列表数据，通常从 API 获取或本地定义：

data() {
  return {
    products: [
      { id: 1, name: 'iPhone 13', price: 6999 },
      { id: 2, name: 'MacBook Pro', price: 12999 },
      { id: 3, name: 'AirPods Pro', price: 1499 }
    ],
    searchQuery: ''
  }
}

搜索输入框

添加搜索输入框绑定到 searchQuery：

vue实现搜索商品

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="搜索商品..."
      @input="handleSearch"
    >
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - ¥{{ product.price }}
      </li>
    </ul>
  </div>
</template>

计算属性过滤

使用计算属性实现实时搜索过滤：

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

方法实现搜索

也可以使用方法实现搜索触发：

vue实现搜索商品

methods: {
  handleSearch() {
    this.filteredProducts = this.products.filter(product =>
      product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

优化性能

对于大数据量，可以添加防抖：

import { debounce } from 'lodash'

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

服务端搜索

如果需要后端搜索，调用 API：

methods: {
  async handleSearch() {
    const response = await axios.get('/api/products', {
      params: { q: this.searchQuery }
    })
    this.filteredProducts = response.data
  }
}

完整示例代码

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="搜索商品..."
      @input="handleSearch"
    >
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - ¥{{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'iPhone 13', price: 6999 },
        { id: 2, name: 'MacBook Pro', price: 12999 },
        { id: 3, name: 'AirPods Pro', price: 1499 }
      ],
      searchQuery: '',
      filteredProducts: []
    }
  },
  created() {
    this.filteredProducts = this.products
  },
  methods: {
    handleSearch() {
      const query = this.searchQuery.toLowerCase()
      this.filteredProducts = this.products.filter(product =>
        product.name.toLowerCase().includes(query)
      )
    }
  }
}
</script>