当前位置：首页 > VUE

vue实现点击搜索

2026-02-19 12:02:36VUE

Vue实现点击搜索功能

在Vue中实现点击搜索功能通常需要结合输入框、按钮和事件处理。以下是几种常见的实现方式：

基础实现方法

创建包含输入框和搜索按钮的组件模板：

vue实现点击搜索

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @keyup.enter="handleSearch"
      placeholder="输入搜索内容"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

在脚本部分处理搜索逻辑：

vue实现点击搜索

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        // 执行搜索操作
        this.$emit('search', this.searchQuery)
        // 或者调用API
        // this.fetchSearchResults()
      }
    }
  }
}
</script>

使用防抖优化性能

对于频繁触发的搜索（如实时搜索），可以添加防抖功能：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    if (this.searchQuery.trim()) {
      // 执行搜索
    }
  }, 500)
}

与后端API交互

结合axios实现API搜索请求：

methods: {
  async fetchSearchResults() {
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      })
      this.results = response.data
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
}

完整组件示例

<template>
  <div>
    <input v-model="searchQuery" @keyup.enter="handleSearch" />
    <button @click="handleSearch">搜索</button>

    <ul v-if="results.length">
      <li v-for="item in results" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    }
  },
  methods: {
    async handleSearch() {
      if (!this.searchQuery.trim()) return

      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        })
        this.results = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  }
}
</script>