vue实现搜索列表

Vue实现搜索列表的方法

数据绑定与列表渲染

使用v-model绑定搜索输入框，通过v-for渲染列表。示例代码：

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

计算属性处理过滤逻辑

通过计算属性filteredList实现实时搜索过滤：

computed: {
  filteredList() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

数据准备

在data中初始化数据和搜索词：

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' }
    ]
  }
}

异步数据加载

结合axios实现异步数据获取：

methods: {
  async fetchData() {
    const response = await axios.get('/api/items')
    this.items = response.data
  }
},
created() {
  this.fetchData()
}

性能优化

对于大数据量场景，可添加防抖处理：

import { debounce } from 'lodash'
methods: {
  search: debounce(function() {
    // 过滤逻辑
  }, 300)
}

样式增强

添加加载状态和空状态提示：

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="filteredList.length === 0">无匹配结果</div>
</template>

完整组件示例

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="handleSearch"
      placeholder="输入关键词搜索"
    >
    <ul v-if="!loading">
      <li 
        v-for="item in filteredList" 
        :key="item.id"
        @click="selectItem(item)"
      >
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
    <p v-if="loading">搜索中...</p>
    <p v-if="!loading && filteredList.length === 0">
      没有找到匹配项
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      loading: false
    }
  },
  computed: {
    filteredList() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item =>
        item.name.toLowerCase().includes(query) ||
        item.description.toLowerCase().includes(query)
      )
    }
  },
  methods: {
    async handleSearch() {
      this.loading = true
      await this.$nextTick()
      this.loading = false
    },
    selectItem(item) {
      this.$emit('item-selected', item)
    }
  }
}
</script>