当前位置：首页 > VUE

vue实现搜索列表

2026-01-15 00:34:58VUE

Vue 实现搜索列表功能

在 Vue 中实现搜索列表功能通常需要以下几个关键步骤：

数据绑定与列表渲染 使用 v-model 绑定搜索输入框，监听用户输入。通过 v-for 指令渲染过滤后的列表数据。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

计算属性处理搜索逻辑 利用 Vue 的计算属性实时过滤列表数据，避免直接修改原始数据。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

优化搜索性能 对于大型数据集，可以添加防抖函数减少频繁计算。

vue实现搜索列表

methods: {
  debounceSearch: _.debounce(function() {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

样式美化 添加基础样式提升用户体验，如高亮匹配文本、加载状态等。

<style>
.highlight {
  background-color: yellow;
}
</style>

API 集成 如需从后端获取数据，可在 mounted 钩子中调用 API。

vue实现搜索列表

async mounted() {
  try {
    const response = await axios.get('/api/items')
    this.items = response.data
  } catch (error) {
    console.error(error)
  }
}

高级实现方案

使用 Vuex 管理状态 当搜索功能涉及多个组件时，建议使用 Vuex 集中管理状态。

// store.js
state: {
  searchQuery: '',
  allItems: []
},
getters: {
  filteredItems: state => {
    return state.allItems.filter(item =>
      item.name.includes(state.searchQuery)
    )
  }
}

添加分页功能 长列表可结合分页组件提升性能。

<pagination 
  :total-items="filteredList.length" 
  @page-changed="handlePageChange"
/>

本地存储搜索历史 使用 localStorage 保存用户搜索记录。

watch: {
  searchQuery(newVal) {
    if (newVal) {
      this.saveToHistory(newVal)
    }
  }
}

标签: 列表 vue

分享给朋友：

vue实现modal

Vue 实现 Modal 弹窗组件使用 Vue 实现 Modal 弹窗组件可以通过多种方式，包括原生 Vue 组件、第三方库或自定义指令。以下是几种常见方法：原生 Vue 组件实现创建一个基础…

vue实现slidetoggle

Vue 实现 SlideToggle 效果 SlideToggle 是一种常见的交互效果，元素以滑动方式展开或收起。以下是几种实现方法：使用 CSS Transition 和 v-show 通过…

vue登录实现

Vue 登录实现实现登录功能通常需要前端与后端配合，Vue 作为前端框架，主要负责表单处理、请求发送和状态管理。以下是常见的实现方式：表单设计与数据绑定使用 Vue 的 v-model 实现表…

vue ref实现

Vue 中 ref 的实现在 Vue 中，ref 是一个用于创建响应式引用的 API，适用于基本类型和对象。以下是 ref 的核心实现原理和使用方法。基本实现原理 ref 通过 Reactive…

vue实现横滚

Vue 实现横滚效果横滚效果通常指水平滚动内容，常见于轮播图、横向导航栏等场景。以下是几种实现方式：使用 CSS 和 Vue 结合通过 CSS 的 overflow-x 和 white-spa…

vue实现气泡

Vue 实现气泡效果的方法在 Vue 中实现气泡效果可以通过 CSS 动画、第三方库或自定义组件完成。以下是几种常见实现方式：使用纯 CSS 和 Vue 过渡通过 Vue 的过渡系统结合 CS…

vue实现搜索列表