当前位置：首页 > VUE

vue实现名字查找功能

2026-01-07 05:51:32VUE

Vue 实现名字查找功能

在 Vue 中实现名字查找功能，可以通过以下方法完成。这里假设有一个名字列表，需要根据用户输入的关键词进行筛选。

数据准备

在 Vue 的 data 中定义名字列表和搜索关键词：

data() {
  return {
    names: ['Alice', 'Bob', 'Charlie', 'David', 'Eve'],
    searchQuery: ''
  }
}

计算属性实现筛选

使用计算属性 filteredNames 根据 searchQuery 过滤名字列表：

vue实现名字查找功能

computed: {
  filteredNames() {
    return this.names.filter(name => 
      name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

模板部分

在模板中添加输入框和列表展示：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="输入名字搜索"
    />
    <ul>
      <li v-for="name in filteredNames" :key="name">
        {{ name }}
      </li>
    </ul>
  </div>
</template>

优化搜索性能

对于大型数据集，可以添加防抖（debounce）来优化性能：

vue实现名字查找功能

import { debounce } from 'lodash';

methods: {
  handleSearch: debounce(function() {
    this.filteredNames = this.names.filter(name =>
      name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

使用第三方库增强

如果需要更复杂的搜索功能（如模糊搜索），可以引入 Fuse.js：

import Fuse from 'fuse.js';

computed: {
  fuse() {
    return new Fuse(this.names, {
      includeScore: true,
      threshold: 0.4
    })
  },
  filteredNames() {
    if (!this.searchQuery) return this.names
    return this.fuse.search(this.searchQuery).map(result => result.item)
  }
}

服务端搜索

对于大量数据，建议通过 API 实现服务端搜索：

methods: {
  async searchNames() {
    const response = await axios.get('/api/names', {
      params: { q: this.searchQuery }
    })
    this.filteredNames = response.data
  }
}