vue3+vite项目,给我一个demo示例,获取当天的时间和后六天的时间,并输出当天星期几和日和后六天的星期几和日,不用输出年和月
时间: 2024-03-11 14:48:02 浏览: 166
vue.js实现带日期星期的数字时钟功能示例
好的,以下是一个可以获取当天时间和后六天时间并输出星期几和日的代码示例:
```html
<template>
<div>
<div>{{ today }}</div>
<ul>
<li v-for="day in tomorrowToSixthDays">{{ day }}</li>
</ul>
</div>
</template>
<script>
import { computed } from 'vue';
export default {
name: 'App',
setup() {
const today = computed(() => {
const now = new Date();
return `${getWeekday(now.getDay())} ${now.getDate()}`;
});
const tomorrowToSixthDays = computed(() => {
const days = [];
for (let i = 1; i <= 6; i++) {
const date = new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * i);
days.push(`${getWeekday(date.getDay())} ${date.getDate()}`);
}
return days;
});
// 获取星期几
function getWeekday(weekday) {
const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
return weekdays[weekday];
}
return {
today,
tomorrowToSixthDays,
};
},
};
</script>
```
在上述代码中,我们使用了 Vue 3 的 `computed` 函数来计算当天和后六天的日期。在 `today` 中,我们获取当天的日期并格式化成“星期几 日”的形式。在 `tomorrowToSixthDays` 中,我们使用 for 循环获取后六天的日期并格式化成“星期几 日”的形式。`getWeekday` 函数用于将数字转换成对应的星期几。最终,在模板中输出 `today` 和 `tomorrowToSixthDays` 即可实现功能。
阅读全文