当前位置：首页 > VUE

vue实现搜索查询

2026-03-07 17:39:19VUE

Vue实现搜索查询的方法

数据绑定与输入处理

在Vue中实现搜索功能，通常使用v-model指令绑定输入框的值到数据属性。创建一个searchQuery数据属性来存储用户输入：

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

模板中使用v-model绑定：

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

计算属性过滤数据

利用Vue的计算属性实时过滤数据，避免直接修改原始数组。当searchQuery变化时，计算属性自动更新：

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

方法调用实现搜索

如果需要手动触发搜索（如点击按钮），可以使用方法替代计算属性：

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

模板中添加按钮触发：

<button @click="performSearch">搜索</button>

使用watch监听查询变化

当搜索逻辑较复杂或需要异步操作时，可以使用watch监听searchQuery变化：

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

防抖优化性能

频繁输入时通过防抖减少计算次数，使用lodash.debounce或自定义实现：

import debounce from 'lodash.debounce'

methods: {
  debouncedSearch: debounce(function() {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

服务端搜索实现

对于大数据量，建议通过API请求服务端搜索：

vue实现搜索查询

methods: {
  async searchFromServer() {
    const response = await axios.get('/api/search', {
      params: { q: this.searchQuery }
    })
    this.filteredItems = response.data
  }
}

标签: vue