当前位置：首页 > VUE

vue实现搜索栏目

2026-03-30 02:14:19VUE

实现搜索栏的基本结构

在 Vue 中实现搜索栏，需要创建一个输入框和一个触发搜索的方法。以下是一个基础模板：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="handleSearch" 
      placeholder="输入关键词搜索"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      // 触发搜索逻辑
      console.log('搜索关键词:', this.searchQuery);
    }
  }
}
</script>

使用计算属性优化搜索

如果搜索需要实时响应（如过滤列表），可以使用计算属性自动更新结果，避免频繁手动触发：

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

结合防抖函数优化性能

频繁触发搜索可能导致性能问题（如请求过多），可以通过防抖（debounce）控制触发频率：

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    }
  },
  methods: {
    handleSearch: debounce(function() {
      // 模拟API请求
      fetch(`/api/search?q=${this.searchQuery}`)
        .then(res => res.json())
        .then(data => this.results = data);
    }, 500) // 延迟500毫秒
  }
}
</script>

与后端API交互

实际项目中，搜索通常需要调用后端接口。以下是一个结合 axios 的示例：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    }
  },
  methods: {
    async handleSearch() {
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        });
        this.results = response.data;
      } catch (error) {
        console.error('搜索失败:', error);
      }
    }
  }
}
</script>

样式与用户体验优化

通过 CSS 美化搜索栏，并增加加载状态提示：

vue实现搜索栏目

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @input="handleSearch" 
      class="search-input"
      placeholder="输入关键词搜索"
    />
    <span v-if="isLoading" class="loading">加载中...</span>
    <ul class="results">
      <li v-for="result in results" :key="result.id">
        {{ result.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      results: [],
      isLoading: false
    }
  },
  methods: {
    async handleSearch() {
      this.isLoading = true;
      try {
        const response = await fetch(`/api/search?q=${this.searchQuery}`);
        this.results = await response.json();
      } finally {
        this.isLoading = false;
      }
    }
  }
}
</script>

<style>
.search-container {
  max-width: 600px;
  margin: 0 auto;
}
.search-input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
}
.loading {
  color: #666;
  font-style: italic;
}
.results {
  list-style: none;
  padding: 0;
}
</style>