vue3+vite项目,给我一个demo示例,获取当天的时间和后六天的时间,并输出当天星期几和年月日和后六天的星期几和年月日
时间: 2024-03-11 22:47:32 浏览: 150
vue.js实现带日期星期的数字时钟功能示例
好的,以下是一个基于Vue3和Vite的Demo示例,可以获取当天的时间和后六天的时间,并输出当天星期几和年月日以及后六天的星期几和年月日。
```html
<template>
<div>
<h1>当天时间和后六天时间示例</h1>
<div v-for="(day, index) in days" :key="index">
<h3>Day {{ index + 1 }}</h3>
<p>日期:{{ day.date }}</p>
<p>星期:{{ day.weekday }}</p>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'App',
setup() {
const days = ref([])
const getDays = () => {
const today = new Date()
for (let i = 0; i < 7; i++) {
const date = new Date(today)
date.setDate(today.getDate() + i)
const weekday = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
days.value.push({
date: date.toLocaleDateString(),
weekday: `星期${weekday}`
})
}
}
onMounted(() => {
getDays()
})
return {
days
}
}
}
</script>
```
在这个示例中,我们使用了Vue3的`ref`和`onMounted`函数来定义一个响应式的`days`变量,以及一个`getDays`方法来获取当天时间和后六天时间,并将结果存储在`days`变量中。
在模板中,我们通过`v-for`指令遍历`days`数组,并输出每一天的日期和星期。其中,我们使用了`Date`对象来获取当前时间和后六天的时间,并使用`toLocaleDateString`方法将日期格式化为`年/月/日`的形式。同时,我们还使用了一个数组来将`Date`对象返回的星期几转换为中文的形式。
阅读全文