当前位置：首页 > VUE

vue 模糊查询实现

2026-02-18 04:18:05VUE

Vue 模糊查询实现方法

使用计算属性实现模糊查询

在 Vue 中可以通过计算属性结合 JavaScript 的 filter 和 includes 方法实现模糊查询。定义一个计算属性，根据输入的关键词过滤数据列表。

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

模板部分绑定输入框和显示过滤结果：

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

使用 Lodash 的防抖优化性能

对于大数据量或频繁输入的情况，可以使用 Lodash 的 debounce 函数优化性能，避免频繁触发过滤计算。

vue 模糊查询实现

import { debounce } from 'lodash'

methods: {
  debouncedSearch: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

模板中监听输入事件：

<input @input="e => debouncedSearch(e.target.value)" placeholder="Search...">

实现多字段模糊查询

如果需要同时匹配多个字段，可以扩展过滤逻辑：

vue 模糊查询实现

computed: {
  filteredItems() {
    return this.items.filter(item => 
      ['name', 'description'].some(field => 
        item[field].toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    )
  }
}

使用第三方库实现高级搜索

对于更复杂的模糊搜索需求，可以使用 Fuse.js 等专门库：

import Fuse from 'fuse.js'

data() {
  return {
    fuse: null,
    // ...其他数据
  }
},
mounted() {
  this.fuse = new Fuse(this.items, {
    keys: ['name', 'description'],
    threshold: 0.4
  })
},
computed: {
  filteredItems() {
    return this.searchQuery 
      ? this.fuse.search(this.searchQuery).map(r => r.item)
      : this.items
  }
}

服务器端模糊查询实现

当数据量很大时，建议将模糊查询逻辑放在服务器端：

methods: {
  async searchItems(query) {
    const response = await axios.get('/api/items', {
      params: { search: query }
    })
    this.filteredItems = response.data
  }
}

使用 watch 监听搜索词变化：

watch: {
  searchQuery(newVal) {
    this.searchItems(newVal)
  }
}

标签: 模糊 vue

分享给朋友：

vue实现查询替换

Vue 实现查询替换功能在 Vue 中实现查询替换功能，可以通过数据绑定和字符串操作方法结合实现。以下是具体实现方式：基础实现 <template> <div>…

vue懒加载实现难吗

vue懒加载的实现难度 Vue懒加载的实现并不复杂，核心逻辑是通过动态导入（Dynamic Imports）和路由配置或组件异步加载完成。以下是具体实现方法：路由懒加载实现在Vue Router…

vue 实现级联

Vue 实现级联选择器级联选择器（Cascader）常用于省市区选择、分类选择等场景。Vue 中可以通过 Element UI、Ant Design Vue 等 UI 库实现，也可以手动封装。使…

vue课程实现

Vue 课程实现方案课程内容设计 Vue课程应从基础到高级逐步展开，涵盖Vue核心概念、组件化开发、状态管理、路由、构建工具等。基础部分包括Vue实例、模板语法、计算属性和侦听器。中级部分深入组件通…

vue实现mui

使用 Vue 实现 MUI（Material-UI）风格的界面 Vue 本身不直接提供 MUI（Material Design）组件，但可以通过集成第三方库或手动实现来达到类似效果。以下是几种常见方法…

vue实现路径

Vue 实现路径的方法在 Vue 中实现路径管理通常涉及 Vue Router 的使用，以下是一些常见的实现方法：安装 Vue Router 通过 npm 或 yarn 安装 Vue Route…

vue 模糊查询实现