当前位置：首页 > VUE

vue filter实现搜索

2026-01-08 16:40:55VUE

使用 Vue 过滤器实现搜索功能

Vue 的过滤器（Filter）可以用于格式化文本，结合计算属性或方法可以实现简单的搜索功能。以下是几种实现方式：

基于计算属性的搜索

通过计算属性过滤数据列表，结合输入框实现搜索功能。

<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: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

结合自定义过滤器

定义一个全局过滤器，用于格式化搜索结果的匹配部分（如高亮显示）。

vue filter实现搜索

// 全局过滤器
Vue.filter('highlight', function(value, query) {
  if (!query) return value
  const regex = new RegExp(query, 'gi')
  return value.replace(regex, match => `<span class="highlight">${match}</span>`)
})

在模板中使用过滤器：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        <span v-html="$options.filters.highlight(item.name, searchQuery)" />
      </li>
    </ul>
  </div>
</template>

方法封装过滤器逻辑

将过滤逻辑封装为方法，适用于更复杂的搜索场景。

vue filter实现搜索

methods: {
  filterItems(items, query) {
    return items.filter(item => 
      item.name.toLowerCase().includes(query.toLowerCase()) ||
      item.description.toLowerCase().includes(query.toLowerCase())
    )
  }
}

在模板中调用：

<ul>
  <li v-for="item in filterItems(items, searchQuery)" :key="item.id">
    {{ item.name }}
  </li>
</ul>

使用 Lodash 防抖优化性能

对于高频输入的搜索框，可以使用 Lodash 的 _.debounce 减少计算频率。

import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [...]
    }
  },
  computed: {
    filteredList: _.debounce(function() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }, 300)
  }
}

多字段联合搜索

扩展计算属性，支持多个字段的联合搜索。

computed: {
  filteredList() {
    const query = this.searchQuery.toLowerCase()
    return this.items.filter(item => 
      item.name.toLowerCase().includes(query) ||
      item.category.toLowerCase().includes(query) ||
      item.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }
}

以上方法可以根据实际需求组合使用。计算属性适合简单场景，自定义过滤器适合格式化显示，而方法封装和防抖优化则适用于复杂或高频搜索场景。