vue 写一个列表带查询功能

好的，以下是一个基本的 Vue 列表带查询功能的示例代码：

<template>
  <div>
    <input type="text" v-model="searchQuery">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        'apple',
        'banana',
        'cherry',
        'date',
        'elderberry',
        'fig',
        'grape',
        'kiwi',
        'lemon'
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.toLowerCase().includes(this.searchQuery.toLowerCase())
      })
    }
  }
}
</script>

这个组件包括一个输入框和一个列表，输入框可以用于搜索列表中的项，当搜索关键词改变时，列表会自动更新以展示匹配的项。