vant 模糊搜索框

Vant是一个轻量级、模块化的Vue UI组件库，它提供了一系列易于使用的预设组件。其中的模糊搜索框（Vant Search）是用于快速筛选和查找列表内容的一个交互组件。Vant Search支持实时搜索建议，用户可以输入关键字，组件会动态展示匹配的结果，提高用户体验。

主要特点包括：
1. **实时过滤**：输入框中的文本变化会被实时监听，并在后台对数据进行过滤，显示相关结果。
2. **智能提示**：当输入的关键词不够明确时，提供相关的前缀匹配建议。
3. **样式统一**：基于Vant的设计规范，拥有简洁美观的外观风格。

使用Vant Search通常需要引入库文件，然后通过API设置数据源、搜索事件处理器等。下面是一个简单的例子：

<template>
  <van-search v-model="query" :debounce="500">
    <van-list :items="filteredItems">
      <van-item slot="item" v-for="(item, index) in items" :key="index">
        {{ item.name }}
      </van-item>
    </van-list>
  </van-search>
</template>

<script>
import { Search, List } from 'vant';

export default {
  components: {
    VanSearch: Search,
    VanList: List,
  },
  data() {
    return {
      query: '',
      items: ... // 初始化的数据源
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.includes(this.query));
    }
  }
};
</script>