当前位置：首页 > VUE

vue实现数据搜素

2026-01-21 19:53:53VUE

Vue 实现数据搜索

在 Vue 中实现数据搜索功能通常涉及以下几个步骤，可以通过计算属性、方法或第三方库（如 Lodash）来实现。

使用计算属性实现搜索

计算属性是 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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
};
</script>

使用方法实现搜索

如果搜索逻辑较为复杂或需要异步操作，可以使用方法来实现搜索功能。

<template>
  <div>
    <input v-model="searchQuery" @input="handleSearch" 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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
      filteredItems: [],
    };
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
  created() {
    this.filteredItems = this.items;
  },
};
</script>

使用 Lodash 实现防抖搜索

对于频繁触发的搜索输入（如实时搜索），可以使用 Lodash 的 debounce 方法减少搜索频率，优化性能。

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

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
      filteredItems: [],
    };
  },
  methods: {
    handleSearch() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    debouncedSearch: debounce(function() {
      this.handleSearch();
    }, 300),
  },
  created() {
    this.filteredItems = this.items;
  },
};
</script>

结合后端 API 实现搜索

如果数据量较大或需要从后端获取搜索结果，可以通过 API 请求实现搜索功能。

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
    };
  },
  methods: {
    fetchSearchResults() {
      if (this.searchQuery.trim() === '') {
        this.searchResults = [];
        return;
      }
      axios.get(`/api/search?query=${this.searchQuery}`)
        .then(response => {
          this.searchResults = response.data;
        })
        .catch(error => {
          console.error('搜索失败:', error);
        });
    },
  },
};
</script>