当前位置：首页 > VUE

vue实现模糊查找

2026-03-08 06:41:28VUE

Vue实现模糊查找的方法

使用计算属性实现

在Vue中可以通过计算属性结合JavaScript的filter和includes方法实现模糊查找。定义一个搜索关键词searchTerm，通过计算属性过滤数组。

data() {
  return {
    searchTerm: '',
    items: ['apple', 'banana', 'orange', 'grape']
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.toLowerCase().includes(this.searchTerm.toLowerCase())
    )
  }
}

使用第三方库Fuse.js

Fuse.js是一个强大的模糊搜索库，支持更复杂的搜索逻辑，如模糊匹配、权重设置等。首先安装Fuse.js：

npm install fuse.js

然后在Vue组件中使用：

import Fuse from 'fuse.js'

data() {
  return {
    searchTerm: '',
    items: [
      { name: 'apple', price: 1 },
      { name: 'banana', price: 2 }
    ],
    fuse: null
  }
},
created() {
  this.fuse = new Fuse(this.items, {
    keys: ['name'],
    threshold: 0.4
  })
},
computed: {
  searchResults() {
    return this.searchTerm 
      ? this.fuse.search(this.searchTerm).map(r => r.item)
      : this.items
  }
}

使用v-model和watch实现

对于需要更复杂逻辑的场景，可以使用watch监听搜索词变化：

data() {
  return {
    searchTerm: '',
    items: ['apple', 'banana'],
    filteredItems: []
  }
},
watch: {
  searchTerm(newVal) {
    this.filteredItems = this.items.filter(item =>
      item.toLowerCase().includes(newVal.toLowerCase())
    )
  }
},
created() {
  this.filteredItems = [...this.items]
}

实现带有高亮显示的搜索

在搜索结果中高亮显示匹配部分，可以使用自定义过滤器或方法：

methods: {
  highlight(text) {
    if (!this.searchTerm) return text
    const regex = new RegExp(`(${this.searchTerm})`, 'gi')
    return text.replace(regex, '<span class="highlight">$1</span>')
  }
}

模板中使用v-html绑定：

<div v-for="item in filteredItems" v-html="highlight(item)"></div>

使用lodash的防抖优化性能

对于大数据量或频繁输入的情况，可以使用lodash的debounce优化性能：

vue实现模糊查找

import { debounce } from 'lodash'

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

注意事项

对于中文搜索，确保正确处理Unicode字符
考虑性能优化，特别是大数据量时的搜索效率
移动端输入时，考虑添加防抖或节流
对于复杂数据结构，可能需要嵌套搜索或多字段搜索

标签: 模糊 vue

分享给朋友：

vue实现anchor

Vue 实现 Anchor（锚点）功能在 Vue 中实现锚点功能可以通过多种方式完成，以下是几种常见的方法：使用 HTML 原生锚点 HTML 原生锚点是最简单的方式，通过 <a>…

vue实现switch

Vue 实现 Switch 开关组件在 Vue 中实现 Switch 开关组件可以通过自定义组件或使用现有 UI 库完成。以下是几种常见实现方式：自定义 Switch 组件创建一个基础 Sw…

vue实现动态

Vue 实现动态路由的方法在 Vue 中实现动态路由通常涉及以下几个关键步骤：使用 Vue Router 的动态路由匹配通过 Vue Router 的 :param 语法可以实现动态路由匹配。…

vue实现groupbox

Vue 实现 GroupBox 组件在 Vue 中实现类似 GroupBox 的效果可以通过自定义组件完成。GroupBox 通常是一个带有标题的边框容器，用于将相关控件分组显示。基本实现方法…

vue实现监听

监听数据变化在Vue中，可以通过watch选项或$watch方法监听数据的变化。watch适用于组件选项内声明式监听，$watch适用于动态监听。 // 选项式API export default…

vue 实现拖拉

Vue 实现拖拽功能的方法使用 HTML5 原生拖放 API HTML5 提供了原生的拖放 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 dr…

vue实现模糊查找