推荐使用:Vue 3 最佳日期选择器解决方案 —— @vuepic/vue-datepicker
warning:
这篇文章距离上次修改已过203天,其中的内容可能已经有所变动。
<template>
<div>
<!-- 使用 @vuepic/vue-datepicker 组件 -->
<datepicker v-model="selectedDate" placeholder="选择日期"></datepicker>
<!-- 显示选中的日期 -->
<p>选中的日期: {{ selectedDate }}</p>
</div>
</template>
<script>
import { Datepicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/vue-datepicker.min.css';
export default {
components: {
Datepicker
},
data() {
return {
selectedDate: null
};
}
};
</script>
这段代码展示了如何在Vue 3应用中集成@vuepic/vue-datepicker
组件。首先导入Datepicker
组件及其样式,然后在模板中使用该组件绑定数据模型selectedDate
,并设置一个占位符。在脚本的数据对象中,我们声明了selectedDate
用于存储选中的日期。这个例子简单明了地展示了日期选择器的使用方法。
评论已关闭