当前位置：首页 > VUE

用vue实现搜索查询

2026-01-12 02:24:01VUE

使用 Vue 实现搜索查询功能

数据绑定与输入框

在 Vue 中实现搜索功能，首先需要创建一个输入框，并通过 v-model 实现双向数据绑定。以下是一个基础模板示例：

<template>
  <div>
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="输入搜索关键词" 
      @input="handleSearch"
    />
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>暂无结果</p>
  </div>
</template>

数据处理与计算属性

在 data 中定义搜索关键词和原始数据列表，通过计算属性 filteredItems 动态过滤结果：

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

防抖优化（可选）

频繁触发搜索时，可以通过防抖（debounce）减少计算压力。使用 Lodash 或手动实现：

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

异步搜索（API 请求）

如果需要从后端获取搜索结果，可使用 axios 或 fetch：

methods: {
  async handleSearch() {
    if (!this.searchQuery.trim()) return;
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      });
      this.filteredItems = response.data;
    } catch (error) {
      console.error('搜索失败:', error);
    }
  }
}

样式与交互增强

添加加载状态和错误提示提升用户体验：

<template>
  <div>
    <input 
      type="text" 
      v-model="searchQuery" 
      @input="handleSearch" 
    />
    <p v-if="loading">搜索中...</p>
    <p v-if="error">{{ error }}</p>
    <ul v-else-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

完整示例代码

<template>
  <div class="search-container">
    <input
      type="text"
      v-model="searchQuery"
      placeholder="输入关键词"
      @input="handleSearch"
    />
    <div v-if="loading">加载中...</div>
    <ul v-else-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <div v-else>未找到匹配项</div>
  </div>
</template>

<script>
import axios from 'axios';
import _ from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      loading: false,
      error: null
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    handleSearch: _.debounce(async function() {
      if (!this.searchQuery.trim()) {
        this.items = [];
        return;
      }
      this.loading = true;
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        });
        this.items = response.data;
        this.error = null;
      } catch (err) {
        this.error = '搜索失败，请重试';
      } finally {
        this.loading = false;
      }
    }, 500)
  }
};
</script>

用vue实现搜索查询