当前位置：首页 > VUE

vue实现搜索查询

2026-01-08 04:10:24VUE

Vue 实现搜索查询的方法

双向绑定实现实时搜索

在Vue中可以通过v-model绑定输入框的值，结合计算属性或watch监听输入变化实现实时搜索。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用debounce优化性能

对于频繁触发的搜索，可以使用lodash的debounce函数减少计算频率。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: []
    }
  },
  watch: {
    searchQuery: debounce(function(newVal) {
      this.filterItems(newVal)
    }, 300)
  },
  methods: {
    filterItems(query) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  }
}

结合API请求实现远程搜索

当需要从服务器获取搜索结果时，可以使用axios等HTTP库。

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

使用第三方组件

对于更复杂的搜索需求，可以考虑使用现成的Vue搜索组件：

vue-select
element-ui的el-autocomplete
ant-design-vue的a-select

<template>
  <v-select 
    v-model="selected"
    :options="options"
    @search="onSearch"
    label="name"
  />
</template>

高级搜索功能实现

对于多条件搜索，可以构建更复杂的查询对象。

export default {
  data() {
    return {
      searchParams: {
        keyword: '',
        category: '',
        priceRange: [0, 100]
      }
    }
  },
  methods: {
    performSearch() {
      const query = {
        q: this.searchParams.keyword,
        category: this.searchParams.category,
        min_price: this.searchParams.priceRange[0],
        max_price: this.searchParams.priceRange[1]
      }
      // 发送API请求
    }
  }
}

vue实现搜索查询