当前位置：首页 > VUE

vue点击事件实现搜索

2026-01-22 17:55:19VUE

实现点击搜索功能的方法

在Vue中实现点击事件触发搜索功能，可以通过以下方式完成：

模板部分

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

脚本部分

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if(this.searchQuery.trim()) {
        // 执行搜索逻辑
        this.performSearch(this.searchQuery)
      }
    },
    performSearch(query) {
      // 实际搜索实现
      console.log('搜索:', query)
      // 可以在这里调用API或过滤本地数据
    }
  }
}
</script>

使用修饰符优化体验

添加键盘事件支持，允许按Enter键触发搜索：

<input 
  v-model="searchQuery" 
  @keyup.enter="handleSearch"
  placeholder="输入搜索内容">

防抖处理

对于频繁触发的搜索，可以添加防抖功能：

methods: {
  handleSearch: _.debounce(function() {
    if(this.searchQuery.trim()) {
      this.performSearch(this.searchQuery)
    }
  }, 500)
}

搜索结果展示

添加结果显示区域：

vue点击事件实现搜索

<template>
  <div>
    <input v-model="searchQuery" @keyup.enter="handleSearch">
    <button @click="handleSearch">搜索</button>
    <ul v-if="searchResults.length">
      <li v-for="result in searchResults" :key="result.id">
        {{ result.title }}
      </li>
    </ul>
  </div>
</template>

完整组件示例

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

      try {
        const response = await fetch(`/api/search?q=${this.searchQuery}`)
        this.searchResults = await response.json()
      } catch(error) {
        console.error('搜索失败:', error)
      }
    }
  }
}
</script>

以上实现方式可以根据实际需求进行调整，如添加加载状态、错误处理等。核心思路是通过v-model绑定输入值，@click或@keyup事件触发搜索方法，然后处理并展示结果。