vue3+vite项目,给我一个demo示例,获取当天的时间和后六天的时间,并输出当天星期几和日和后六天的星期几和日
时间: 2024-03-11 14:47:49 浏览: 77
vue.js实现带日期星期的数字时钟功能示例
好的,下面是一个简单的 Vue3 + Vite 的 Demo 示例,可以获取当天的时间和后六天的时间,并输出当天星期几和日和后六天的星期几和日。
```html
<template>
<div>
<h2>当天时间</h2>
<p>{{ today }}</p>
<p>{{ todayWeek }}</p>
<h2>后六天时间</h2>
<div v-for="(item, index) in nextSixDays" :key="index">
<p>{{ item.date }}</p>
<p>{{ item.week }}</p>
</div>
</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
name: 'Demo',
setup() {
const today = ref('')
const todayWeek = ref('')
const nextSixDays = ref([])
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
const getCurrentDate = () => {
const currentDate = new Date()
const month = currentDate.getMonth() + 1
const date = currentDate.getDate()
today.value = `${month}月${date}日`
todayWeek.value = `星期${weekdays[currentDate.getDay()]}`
}
const getNextSixDays = () => {
for (let i = 1; i <= 6; i++) {
const nextDate = new Date()
nextDate.setDate(nextDate.getDate() + i)
const month = nextDate.getMonth() + 1
const date = nextDate.getDate()
nextSixDays.value.push({
date: `${month}月${date}日`,
week: `星期${weekdays[nextDate.getDay()]}`
})
}
}
getCurrentDate()
getNextSixDays()
return {
today,
todayWeek,
nextSixDays
}
}
}
</script>
```
这个示例中,我们使用了 Vue3 的 `ref` 和 `computed` 方法来定义数据和计算属性。通过 `getCurrentDate` 方法获取当天的时间和星期几,并通过 `getNextSixDays` 方法获取后六天的时间和星期几。最后将这些数据渲染到模板中。注意,这里只输出了月和日,没有输出年。
阅读全文