vue3+ts语法,获取当天时间以及后六天
时间: 2023-08-20 17:07:15 浏览: 104
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
5星 · 资源好评率100%
你可以使用 JavaScript 的 Date 对象来获取当前时间并计算后六天的日期。以下是一个示例代码:
```typescript
import { ref } from 'vue';
interface DayInfo {
date: Date;
dayOfWeek: string;
}
export default {
setup() {
const today = ref<DayInfo>({ date: new Date(), dayOfWeek: '' });
const days = ref<DayInfo[]>([]);
// 获取星期几
const getDayOfWeek = (date: Date) => {
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return daysOfWeek[date.getDay()];
};
// 计算后六天的日期
const getNextSixDays = () => {
const nextDays: DayInfo[] = [];
for (let i = 1; i <= 6; i++) {
const nextDate = new Date();
nextDate.setDate(today.value.date.getDate() + i);
nextDays.push({ date: nextDate, dayOfWeek: getDayOfWeek(nextDate) });
}
return nextDays;
};
// 初始化数据
const initData = () => {
today.value.dayOfWeek = getDayOfWeek(today.value.date);
days.value = getNextSixDays();
};
initData();
return {
today,
days,
};
},
};
```
在上述代码中,我们使用了 `ref` 函数来声明响应式数据,其中 `today` 存储了今天的日期信息,包括日期和星期几,`days` 存储了今天后六天的日期信息,同样包括日期和星期几。
在 `getNextSixDays` 函数中,我们通过遍历计算出今天后六天的日期,并将其存储在一个数组中返回。在 `initData` 函数中,我们初始化 `today` 和 `days` 的值。
最后,在组件中,你可以通过访问 `today` 和 `days` 来获取当前日期和后六天的日期。
阅读全文