在vue3中实现关键字查询

在Vue3中实现关键字查询可以使用computed属性和watch属性。首先，定义一个data属性来存储关键字和查询结果，然后使用computed属性来计算查询结果。在computed属性中，使用filter函数来过滤数据，只返回包含关键字的数据。最后，使用watch属性来监听关键字的变化，当关键字发生变化时，重新计算查询结果。

以下是示例代码：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入关键字">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['apple', 'banana', 'orange', 'pear']
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.keyword))
    }
  },
  watch: {
    keyword() {
      this.filteredList
    }
  }
}
</script>

当用户输入关键字时，computed属性会自动计算查询结果并更新页面。同时，watch属性会监听关键字的变化，当关键字发生变化时，重新计算查询结果。