当前位置：首页 > VUE

vue点击事件实现搜索

2026-02-23 08:42:54VUE

实现点击事件触发搜索功能

在Vue中实现点击事件触发搜索功能，可以通过v-on指令或@简写绑定点击事件，结合数据绑定和搜索逻辑完成。以下是具体实现方式：

基础实现方式

模板部分

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

脚本部分

vue点击事件实现搜索

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        // 执行搜索逻辑
        this.performSearch(this.searchQuery)
      }
    },
    performSearch(query) {
      // 实际搜索逻辑
      console.log('正在搜索:', query)
    }
  }
}
</script>

进阶实现方式

添加回车键触发

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

添加防抖处理

vue点击事件实现搜索

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

搜索结果显示

带结果的完整示例

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

    <div v-if="searchResults.length">
      <ul>
        <li v-for="result in searchResults" :key="result.id">
          {{ result.title }}
        </li>
      </ul>
    </div>
  </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>

使用计算属性优化

对于本地数据搜索，可以使用计算属性：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

以上实现方式可以根据实际需求进行调整和组合使用。