当前位置：首页 > VUE

vue实现input模糊查询

2026-01-20 22:55:37VUE

实现 Vue 的 input 模糊查询

在 Vue 中实现 input 模糊查询，可以通过监听输入框的变化，实时过滤数据列表。以下是一个完整的实现方法：

模板部分

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="输入关键词进行模糊查询"
    />
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

脚本部分

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

高级模糊查询实现

如果需要更强大的模糊查询功能，可以使用正则表达式或第三方库：

computed: {
  filteredList() {
    if (!this.searchQuery) return this.originalList

    const pattern = new RegExp(this.searchQuery, 'i')
    return this.originalList.filter(item => 
      pattern.test(item.name)
    )
  }
}

使用 lodash 进行防抖处理

为避免频繁触发过滤函数，可以使用 lodash 的防抖功能：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    this.filteredList = this.originalList.filter(item =>
      item.name.includes(this.searchQuery)
    )
  }, 300)
}

服务端模糊查询

当数据量较大时，建议将查询逻辑放到服务端：

vue实现input模糊查询

methods: {
  async searchItems() {
    const response = await axios.get('/api/items', {
      params: { q: this.searchQuery }
    })
    this.filteredList = response.data
  }
}

以上方法涵盖了从简单到复杂的模糊查询实现，可以根据实际需求选择合适的方案。