当前位置：首页 > VUE

vue实现搜索栏目

2026-01-17 09:09:50VUE

Vue 实现搜索栏

基础搜索栏实现

创建基本的搜索输入框和搜索按钮，使用 v-model 绑定搜索关键词：

<template>
  <div class="search-bar">
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="输入关键词..."
      @keyup.enter="handleSearch"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchQuery)
    }
  }
}
</script>

实时搜索功能

添加防抖（debounce）优化实时搜索性能：

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      debouncedSearch: null
    }
  },
  created() {
    this.debouncedSearch = debounce(this.doSearch, 500)
  },
  methods: {
    handleInput() {
      this.debouncedSearch()
    },
    doSearch() {
      this.$emit('search', this.searchQuery)
    }
  }
}

搜索结果显示

结合计算属性实现列表过滤：

export default {
  props: ['items'],
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}

样式优化

添加基础CSS样式增强用户体验：

.search-bar {
  display: flex;
  margin: 20px 0;
}

.search-bar input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  flex-grow: 1;
}

.search-bar button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

高级功能扩展

实现搜索历史记录功能：

export default {
  data() {
    return {
      searchQuery: '',
      searchHistory: []
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.searchHistory.unshift(this.searchQuery)
        this.$emit('search', this.searchQuery)
      }
    }
  }
}

vue实现搜索栏目