当前位置：首页 > VUE

vue怎么实现精准查询

2026-02-23 18:30:04VUE

Vue 实现精准查询的方法

在 Vue 中实现精准查询通常涉及以下几个关键步骤，结合计算属性、过滤器或直接方法调用来完成。以下是几种常见实现方式：

使用计算属性过滤数据

通过计算属性对数组数据进行筛选，结合输入框的 v-model 实现动态查询：

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入查询关键词">
    <ul>
      <li v-for="item in filteredItems" :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: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

结合 Lodash 的防抖优化

对于高频输入场景，使用 Lodash 的 debounce 减少计算频率：

vue怎么实现精准查询

import { debounce } from 'lodash';

export default {
  methods: {
    handleSearch: debounce(function(query) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      );
    }, 300)
  }
};

使用 Vue 过滤器

通过自定义过滤器实现查询逻辑（适用于简单场景）：

Vue.filter('exactMatch', function(items, query) {
  return items.filter(item => item.name === query);
});

模板中调用：

vue怎么实现精准查询

<li v-for="item in items | exactMatch(searchQuery)">{{ item.name }}</li>

后端 API 精准查询

若数据量较大，建议将查询逻辑交由后端处理，通过 API 返回精准结果：

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

多字段联合查询

支持多个字段的精准匹配：

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