vue实现精准查询

Vue实现精准查询的方法

精准查询通常需要结合输入的关键词与数据进行严格匹配，以下是几种常见的实现方式：

使用计算属性过滤数据

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

在模板中直接使用计算属性：

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

使用watch监听查询变化

data() {
  return {
    searchQuery: '',
    filteredItems: []
  };
},
watch: {
  searchQuery(newVal) {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase() === newVal.toLowerCase()
    );
  }
}

使用lodash的debounce优化性能

import { debounce } from 'lodash';

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

结合后端API实现精准查询

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

使用正则表达式实现更复杂的匹配

computed: {
  filteredItems() {
    const regex = new RegExp(`^${this.searchQuery}$`, 'i');
    return this.items.filter(item => regex.test(item.name));
  }
}

注意事项

• 对于中文搜索，确保统一转换为相同的大小写或格式
• 大量数据时考虑分页或虚拟滚动优化性能
• 敏感字符需要进行转义处理
• 空查询时应返回全部数据或友好提示

以上方法可以根据具体需求组合使用，实现不同精度级别的查询功能。