当前位置：首页 > VUE

vue 实现查找数据

2026-01-23 10:45:26VUE

在 Vue 中实现数据查找功能

使用计算属性实现查找
计算属性可以根据输入的关键字动态过滤数据，适合简单的查找场景。

<template>
  <input v-model="searchTerm" placeholder="输入关键字">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      )
    }
  }
}
</script>

使用 watch 和 methods 实现查找
当需要更复杂的查找逻辑或异步操作时，可以使用 watch 配合 methods。

<script>
export default {
  data() {
    return {
      searchTerm: '',
      filteredItems: [],
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  },
  watch: {
    searchTerm(newVal) {
      this.filterItems(newVal)
    }
  },
  methods: {
    filterItems(term) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(term.toLowerCase())
      )
    }
  },
  created() {
    this.filteredItems = [...this.items]
  }
}
</script>

使用第三方库实现高级查找
对于大型数据集或复杂搜索需求，可以使用 lodash 的 _.debounce 或 Fuse.js 等库优化性能。

import { debounce } from 'lodash'

export default {
  methods: {
    filterItems: debounce(function(term) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(term.toLowerCase())
      )
    }, 300)
  }
}

使用 Vuex 管理查找状态
在大型应用中，可以通过 Vuex 集中管理搜索状态和逻辑。

// store.js
export default new Vuex.Store({
  state: {
    searchTerm: '',
    items: [...]
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchTerm.toLowerCase())
      )
    }
  }
})

服务器端查找实现
当数据量很大时，应该通过 API 请求在服务器端进行查找。

methods: {
  async searchItems() {
    const response = await axios.get('/api/items', {
      params: { q: this.searchTerm }
    })
    this.filteredItems = response.data
  }
}

以上方法可以根据具体需求选择使用，计算属性方式适合简单场景，而 watch 和 methods 组合更适合复杂逻辑，第三方库能提供性能优化，Vuex 适合状态管理，服务器端查找则适合大数据量情况。

vue 实现查找数据