当前位置：首页 > VUE

vue实现查询功能

2026-01-20 04:56:42VUE

实现基础查询功能

在Vue中实现查询功能通常需要结合v-model绑定输入框数据，通过计算属性或方法过滤数据。以下是一个基础示例：

<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>

使用第三方库增强搜索

对于复杂搜索需求（如模糊搜索、拼音搜索），可以引入Fuse.js或lodash库：

vue实现查询功能

import Fuse from 'fuse.js';

// 在Vue组件中
methods: {
  setupFuseSearch() {
    const fuse = new Fuse(this.items, {
      keys: ['name'],
      threshold: 0.4
    });
    return fuse.search(this.searchQuery).map(result => result.item);
  }
}

结合API实现远程搜索

当数据量较大时，建议通过API实现后端搜索：

vue实现查询功能

export default {
  methods: {
    async fetchSearchResults() {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      });
      this.filteredList = response.data;
    }
  },
  watch: {
    searchQuery(newVal) {
      if (newVal.length > 2) this.fetchSearchResults();
    }
  }
}

添加搜索防抖优化性能

频繁触发搜索时，使用防抖函数减少请求次数：

import { debounce } from 'lodash';

export default {
  created() {
    this.debouncedSearch = debounce(this.fetchSearchResults, 500);
  },
  watch: {
    searchQuery() {
      this.debouncedSearch();
    }
  }
}

实现多条件高级搜索

通过对象绑定多个搜索字段：

<input v-model="searchParams.name" placeholder="名称">
<input v-model="searchParams.category" placeholder="分类">

<script>
computed: {
  filteredList() {
    return this.items.filter(item => {
      return (
        item.name.includes(this.searchParams.name) &&
        item.category.includes(this.searchParams.category)
      );
    });
  }
}
</script>