当前位置：首页 > VUE

vue 搜索框列表实现

2026-01-20 03:07:52VUE

Vue 搜索框列表实现

在 Vue 中实现搜索框列表功能，通常涉及数据绑定、过滤和渲染列表。以下是具体实现方法：

数据绑定与搜索输入

创建 Vue 实例或组件，定义数据模型和搜索输入框：

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

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

计算属性过滤

使用计算属性 filteredItems 根据搜索词过滤列表项。toLowerCase() 确保搜索不区分大小写，includes() 检查项目名称是否包含搜索词。

样式优化

为搜索框和列表添加基本样式：

<style scoped>
input {
  padding: 8px;
  width: 200px;
  margin-bottom: 10px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>

异步数据加载

如果数据需要从 API 获取，可以使用 created 钩子或 mounted 钩子加载数据：

export default {
  data() {
    return {
      searchQuery: '',
      items: []
    }
  },
  async created() {
    const response = await fetch('https://api.example.com/items')
    this.items = await response.json()
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}

使用第三方库

对于更复杂的搜索功能，可以集成第三方库如 Fuse.js 实现模糊搜索：

import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      fuse: null
    }
  },
  created() {
    this.loadItems()
  },
  methods: {
    async loadItems() {
      const response = await fetch('https://api.example.com/items')
      this.items = await response.json()
      this.fuse = new Fuse(this.items, {
        keys: ['name'],
        threshold: 0.3
      })
    }
  },
  computed: {
    filteredItems() {
      if (!this.searchQuery) return this.items
      return this.fuse.search(this.searchQuery).map(result => result.item)
    }
  }
}

性能优化

对于大型列表，考虑使用虚拟滚动（如 vue-virtual-scroller）减少 DOM 节点数量：

import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components: { RecycleScroller },
  // 其余代码相同
}

<RecycleScroller
  class="scroller"
  :items="filteredItems"
  :item-size="32"
  key-field="id"
>
  <template v-slot="{ item }">
    <div>{{ item.name }}</div>
  </template>
</RecycleScroller>

以上方法提供了从基础到高级的 Vue 搜索框列表实现方案，可根据项目需求选择适合的方式。

vue 搜索框列表实现