vue3怎么在搜索框加上日期

在Vue 3中，在搜索框中添加日期可以使用第三方组件或者原生的日期选择器。下面分别介绍两种方法：

### 使用第三方组件

Vue 3中有很多第三方组件库可以使用，其中比较流行的有Element Plus、Ant Design Vue等。这些组件库中都包含有日期选择器组件，可以直接引入使用。以Element Plus为例，可以按照以下步骤来添加日期选择器：

1. 安装Element Plus

npm install element-plus --save

2. 在main.js中引入Element Plus并注册组件

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 在搜索框中添加日期选择器

<el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>

上面的代码中，我们使用了Element Plus提供的`el-date-picker`组件来实现日期选择器功能，`v-model`指令用于双向绑定选中的日期，`type`属性指定日期选择器的类型为日期，`placeholder`属性用于设置日期选择器的占位符。

### 使用原生的日期选择器

除了使用第三方组件外，我们也可以使用原生的日期选择器来添加日期功能。在Vue 3中，可以使用`<input type="date">`来创建日期选择器，具体代码如下：

<input type="date" v-model="date">

上面的代码中，我们创建了一个类型为日期的`<input>`元素，并使用`v-model`指令将选中的日期绑定到Vue实例的`date`属性上。

总结一下，以上两种方法都可以在Vue 3中添加日期选择器。如果你需要更多的样式和功能，可以考虑使用第三方组件库，如果你只需要简单的日期选择器功能，可以使用原生的日期选择器。