当前位置：首页 > VUE

vue实现搜索

2026-02-09 09:48:36VUE

Vue实现搜索功能的方法

使用v-model绑定输入框

在Vue中可以通过v-model指令实现输入框的双向绑定，监听用户输入内容。创建一个data属性存储搜索关键词，模板中使用v-model绑定到input元素。

<template>
  <input v-model="searchQuery" placeholder="搜索...">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  }
}
</script>

计算属性过滤列表

对于需要搜索的数组数据，可以使用计算属性实现实时过滤。计算属性会根据searchQuery的变化自动重新计算，返回过滤后的结果。

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

使用watch监听搜索词

当需要执行异步搜索或较复杂的操作时，可以使用watch监听searchQuery的变化。设置immediate和deep选项可以控制监听行为。

vue实现搜索

watch: {
  searchQuery(newVal) {
    this.debouncedSearch(newVal)
  }
},
created() {
  this.debouncedSearch = _.debounce(this.doSearch, 500)
}

服务端搜索实现

对于大数据量的搜索，需要调用API接口实现服务端搜索。在watch或方法中发送请求获取搜索结果。

methods: {
  async doSearch(query) {
    try {
      const res = await axios.get('/api/search', { params: { q: query } })
      this.results = res.data
    } catch (error) {
      console.error(error)
    }
  }
}

添加搜索建议

提升用户体验可添加搜索建议功能。使用v-show/v-if控制建议列表显示，@keydown事件处理键盘导航。

vue实现搜索

<div v-show="showSuggestions">
  <ul>
    <li v-for="(suggestion, index) in suggestions" 
        :key="index"
        @click="selectSuggestion(suggestion)">
      {{ suggestion }}
    </li>
  </ul>
</div>

防抖优化性能

频繁触发搜索会影响性能，使用lodash的debounce函数或自定义防抖函数可减少请求次数。

import { debounce } from 'lodash'

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

路由参数同步

在页面刷新时保持搜索状态，可将搜索词同步到路由query参数中。

watch: {
  searchQuery(newVal) {
    this.$router.replace({ query: { q: newVal } })
  }
},
created() {
  if (this.$route.query.q) {
    this.searchQuery = this.$route.query.q
  }
}

标签: vue