vue3+vite项目,给我一个demo示例,获取当天的时间,并输出星期几和年月日
时间: 2024-03-11 10:47:16 浏览: 73
vue实现获取当前时间,输出为年月日时分秒
好的,以下是一个简单的 Vue3 + Vite 项目的示例代码,可以获取当前日期并输出星期几和年月日:
在 main.js 文件中,引入 Vue3:
```
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
在 App.vue 文件中,编写代码:
```
<template>
<div>
<h1>当前日期:{{ date }}</h1>
<h2>星期{{ day }}</h2>
<h2>{{ year }}年{{ month }}月{{ dayOfMonth }}日</h2>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const date = ref('')
const day = ref('')
const year = ref('')
const month = ref('')
const dayOfMonth = ref('')
const getDate = () => {
const today = new Date()
const daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"]
const yearStr = today.getFullYear().toString()
const monthStr = (today.getMonth() + 1).toString().padStart(2, '0')
const dayOfMonthStr = today.getDate().toString().padStart(2, '0')
const dayOfWeekStr = daysOfWeek[today.getDay()]
date.value = `${yearStr}-${monthStr}-${dayOfMonthStr}`
day.value = dayOfWeekStr
year.value = yearStr
month.value = monthStr
dayOfMonth.value = dayOfMonthStr
}
getDate()
return {
date,
day,
year,
month,
dayOfMonth
}
}
}
</script>
```
在浏览器中运行项目,即可看到当前日期和星期几以及年月日的输出。
阅读全文