写一个vue页面 实现列表数据查询

好的，下面是一个简单的Vue页面，实现了列表数据的查询：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入搜索关键字" />
    <button @click="search">搜索</button>
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        { id: 4, name: 'Durian' },
        { id: 5, name: 'Elderberry' },
      ],
      searchText: '',
    };
  },
  computed: {
    filteredList() {
      if (!this.searchText) {
        return this.list;
      }
      const regex = new RegExp(this.searchText, 'i');
      return this.list.filter((item) => regex.test(item.name));
    },
  },
  methods: {
    search() {
      // do something
    },
  },
};
</script>

<style>
/* add some styles here */
</style>

这个页面有一个搜索框和一个搜索按钮，当用户输入关键字并点击搜索按钮时，页面会根据用户输入的关键字过滤出符合条件的数据，并在页面上展示出来。

其中，列表数据存储在`list`数组中，搜索框的输入值绑定到了`searchText`变量上，过滤后的数据通过计算属性`filteredList`获取。在`search`方法中可以添加一些逻辑，比如向后端发起请求获取数据等。