vue3+vite项目,给我一个demo示例,获取当天的时间和后六天的时间,并输出当天星期几和日和后六天的星期几和日,不用输出年和月,适配uniapp
时间: 2024-03-12 17:45:06 浏览: 49
vue.js实现带日期星期的数字时钟功能示例
好的,以下是一个基于 Vue3 和 Vite 的示例代码:
```vue
<template>
<div>
<div>今天是 {{ today.weekday }} {{ today.day }}</div>
<div v-for="day in days" :key="day.weekday">后 {{ day.index + 1 }} 天是 {{ day.weekday }} {{ day.day }}</div>
</div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const today = reactive(getToday())
const days = computed(() => {
return Array.from({ length: 6 }, (_, index) => {
const date = new Date()
date.setDate(date.getDate() + index + 1)
return getDayInfo(date)
})
})
function getToday() {
const date = new Date()
return getDayInfo(date)
}
function getDayInfo(date) {
const weekday = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
const day = date.getDate()
return { weekday, day, index: days.value.length }
}
return { today, days }
}
}
</script>
```
该示例代码会输出当天的星期几和日,以及后六天的星期几和日。可以通过修改 `weekday` 的数组来适配不同的语言,也可以通过修改 `days` 的长度来获取不同天数的日期信息。另外,该代码也适配了 uniapp 环境。
阅读全文