当前位置：首页 > VUE

vue实现搜索页面

2026-01-16 08:28:30VUE

Vue 实现搜索页面的方法

基础结构搭建

创建搜索组件，包含输入框和搜索按钮，使用v-model绑定搜索关键词：

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

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

搜索结果展示

使用计算属性过滤数据列表：

<template>
  <div>
    <search-bar @search="handleSearch"/>
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>无匹配结果</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 原始数据
      searchTerm: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      )
    }
  },
  methods: {
    handleSearch(term) {
      this.searchTerm = term
    }
  }
}
</script>

高级搜索功能

实现防抖优化和异步搜索：

<script>
import debounce from 'lodash/debounce'

export default {
  created() {
    this.debouncedSearch = debounce(this.doSearch, 500)
  },
  methods: {
    handleInput() {
      this.debouncedSearch()
    },
    async doSearch() {
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        })
        this.results = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

路由集成

通过路由参数实现可分享的搜索链接：

// router.js
{
  path: '/search/:query?',
  component: SearchPage
}

<script>
export default {
  watch: {
    '$route.params.query'(newVal) {
      if (newVal) this.search(newVal)
    }
  },
  methods: {
    search(query) {
      this.$router.push({ path: `/search/${query}` })
      // ...执行搜索逻辑
    }
  }
}
</script>

样式优化

添加加载状态和动画效果：

<template>
  <div>
    <transition-group name="fade" tag="ul">
      <li v-for="item in results" :key="item.id">
        {{ item.title }}
      </li>
    </transition-group>
    <div v-if="loading" class="loading-indicator">
      搜索中...
    </div>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

这些方法涵盖了从基础到高级的搜索功能实现，可根据实际需求组合使用。

vue实现搜索页面