前端使用vue3的setup实现一个搜索框

在Vue3中，可以使用setup函数来编写组件逻辑。下面是一个搜索框的示例代码：

<template>
  <div>
    <input type="text" v-model="searchTerm" placeholder="Search...">
    <button @click="search">Search</button>
    <p v-if="searchResult">Search results: {{ searchResult }}</p>
  </div>
</template>

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

export default {
  setup() {
    const searchTerm = ref('');
    const searchResult = ref('');

    const search = () => {
      // Call search API with searchTerm value
      searchResult.value = `Your search for "${searchTerm.value}" returned 10 results`;
    };

    return {
      searchTerm,
      searchResult,
      search,
    };
  },
};
</script>

在上述代码中，我们首先导入了Vue3中的`ref`函数，它用于创建响应式数据。然后在`setup`函数中，我们创建了两个`ref`对象：`searchTerm`和`searchResult`，分别用于保存用户输入的关键词和搜索结果。

接下来，我们定义了一个`search`函数，用于执行搜索操作。在这个函数中，我们可以调用搜索API，并将结果保存到`searchResult`中。

最后，我们在`return`语句中返回了三个对象：`searchTerm`、`searchResult`和`search`，它们都可以在模板中使用。在模板中，我们使用`v-model`指令将输入框的值绑定到`searchTerm`，使用`@click`指令监听按钮的点击事件，并使用`v-if`指令来根据搜索结果是否存在来显示提示信息。

这样，我们就成功地使用Vue3的`setup`函数实现了一个搜索框。