当前位置：首页 > VUE

vue 实现搜索

2026-03-27 17:54:58VUE

Vue 实现搜索功能的方法

使用 v-model 绑定输入框

在 Vue 中，可以通过 v-model 双向绑定输入框的值，实时监听用户的输入。
创建一个数据属性 searchQuery 来存储搜索关键词：

data() {
  return {
    searchQuery: '',
    items: [] // 原始数据列表
  }
}

模板部分：

vue 实现搜索

<input v-model="searchQuery" placeholder="输入关键词搜索">

计算属性过滤数据

利用计算属性 computed 动态过滤数据，避免每次输入都重新计算。
根据 searchQuery 过滤 items 列表：

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

使用 watch 监听搜索词

如果需要在搜索时触发异步操作（如 API 请求），可以使用 watch 监听 searchQuery 的变化：

vue 实现搜索

watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) { // 避免频繁请求
      this.fetchSearchResults(newVal)
    }
  }
},
methods: {
  async fetchSearchResults(query) {
    const response = await axios.get(`/api/search?q=${query}`)
    this.items = response.data
  }
}

防抖优化性能

通过 Lodash 的 debounce 减少频繁搜索的请求次数：

import { debounce } from 'lodash'

methods: {
  fetchSearchResults: debounce(function(query) {
    // API 请求逻辑
  }, 500) // 延迟 500ms
}

显示搜索结果

在模板中渲染过滤后的列表：

<ul v-if="filteredItems.length">
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>
<p v-else>暂无结果</p>

完整示例代码

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

标签: vue