vue3名字模糊查询

在Vue 3中实现名字模糊查询功能，通常需要结合计算属性（computed properties）或方法（methods）来动态地根据输入的变化筛选数据。具体实现可以分为以下几个步骤：

1. 创建一个数据源，这通常是一个数组，包含有名字等属性的对象。
2. 在组件中添加一个响应式的数据属性，用于绑定用户输入的查询字符串。
3. 使用计算属性来创建一个根据输入值动态筛选数据源的新数组，或者在方法中返回筛选后的数据。
4. 在模板中绑定查询字符串输入框和用于显示查询结果的列表。

下面是一个简单的实现示例：

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入名字进行查询" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const items = ref([
      // ...填充数据源，例如：{ id: 1, name: '张三' }, { id: 2, name: '李四' }
    ]);
    const searchQuery = ref('');

    const filteredItems = computed(() => {
      return items.value.filter(item => item.name.includes(searchQuery.value));
    });

    return {
      items,
      searchQuery,
      filteredItems
    };
  }
};
</script>

在这个例子中，`searchQuery` 是一个响应式数据，绑定到输入框上。`filteredItems` 是一个计算属性，它会根据 `searchQuery` 的值动态地返回匹配的名字列表。当用户在输入框中输入时，`searchQuery` 的值会实时更新，计算属性 `filteredItems` 会基于这个新的值重新计算筛选结果，并且视图会自动更新以显示结果。