vue3 ＜script setup＞ 语法糖时间组件增加年-月-日（星期）

<template>
    <p>{{ currentTime }}</p>
</template>
<script setup>
import { ref, onBeforeUnmount, onMounted } from 'vue'
const currentTime = ref('')
let interval // 声明 interval 变量
const getToday = () => {
  const datas = new Date()
  let onS = datas.getHours()
  let onF = datas.getMinutes()
  let onN = datas.getSeconds()
  if (onS >= 0 && onS <= 9) {
    onS = '0' + onS
  }
  if (onF >= 0 && onF <= 9) {
    onF = '0' + onF
  }
  if (onN >= 0 && onN <= 9) {
    onN = '0' + onN
  }
  let days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  let day = days[datas.getDay()]
  let month = datas.getMonth() + 1
  let year = datas.getFullYear()
  let date = datas.getDate()
  if (month < 10) {
    month = '0' + month
  }
  if (date < 10) {
    date = '0' + date
  }
  currentTime.value = `${year}-${month}-${date} (${day}) ${onS}:${onF}:${onN}   `
}
onMounted(() => {
  interval = setInterval(() => {
    // 将 interval 赋值为 setInterval 的返回值
    getToday()
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(interval) // 使用 clearInterval 清除 interval 计时器
})
</script>
<style scoped>
p {
  font-size: 45px;
  color: hsla(160, 100%, 37%, 1);
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
 /* 设置字体粗细 */
 font-weight: 600;
}
</style>

<template>
  <div>
    <p>{{ dateTime }}</p>
    <sub>{{ dayTime }}</sub>
    <p>{{ currentTime }}</p>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dateTime = ref('')
const dayTime = ref('')
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  let month = now.getMonth() + 1
  const day = now.getDate()
  let hour = now.getHours()
  let min = now.getMinutes()
  let second = now.getSeconds()
  const arrWork = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const week = arrWork[now.getDay()]
  month = month < 10 ? '0' + month : month
  hour = hour < 10 ? '0' + hour : hour
  min = min < 10 ? '0' + min : min
  second = second < 10 ? '0' + second : second
  dateTime.value = `${year}-${month}-${day}`
  dayTime.value = `${week}`
  currentTime.value = `${hour}:${min}:${second}`
}
onMounted(() => {
  window.setInterval(updateTime, 1000)
  updateTime()
})
</script>
<style scoped>
div {
  display: flex;
}
p {
  font-size: 25px;
  background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
}
sub {
  margin: 15px 0 0 0;
  background: -webkit-linear-gradient(315deg, hsl(0, 0%, 100%) 50%, #fcf401);
}
p,
sub {
  /*将背景剪切成文字的形状*/
  background-clip: text;
  -webkit-background-clip: text;
  /*文字颜色设为透明，使文字与背景融为一体*/
  -webkit-text-fill-color: transparent;
  /* 设置字体粗细 */
  font-weight: 900;
  text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
}
</style>

<!-- eslint-disable vue/no-v-html -->
<template>
  <div>
    <p v-html="currentTime"></p>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const currentTime = ref('')

const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  let month = now.getMonth() + 1
  const day = now.getDate()
  let hour = now.getHours()
  let min = now.getMinutes()
  let second = now.getSeconds()

  const arrWork = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const week = arrWork[now.getDay()]
  month = month < 10 ? '0' + month : month
  hour = hour < 10 ? '0' + hour : hour
  min = min < 10 ? '0' + min : min
  second = second < 10 ? '0' + second : second

  currentTime.value = `${year}-${month}-${day}<sub>${week}</sub> ${hour}:${min}:${second}`
}

onMounted(() => {
  window.setInterval(updateTime, 1000)
  updateTime()
})
</script>
<style scoped>
p {
  font-size: 25px;
  background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
  /*将背景剪切成文字的形状*/
  background-clip: text;
  -webkit-background-clip: text;
  /*文字颜色设为透明，使文字与背景融为一体*/
  -webkit-text-fill-color: transparent;
  /* 设置字体粗细 */
  font-weight: 900;
  text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
}
</style>