v3+ts动态显示时分秒

最新推荐文章于 2023-12-06 15:26:05 发布

花笙_

最新推荐文章于 2023-12-06 15:26:05 发布

阅读量300

点赞数

分类专栏： VUE 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/wang_59881/article/details/130423439

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v3+ts动态显示时分秒
效果图（白色部分是水印）：
在这里插入图片描述

<template>
	<!-- 时分秒-->
	<div class="cont-time">{{ nowTime }}</div>
	<!-- 年月日-->
	<div class="cont-date">{{ nowDate }}</div>
</template>
<script setup lang="ts">
 const nowTime = ref('');
 const nowDate = ref('');
 onMounted(() => {
    var date = new Date();
    var yy = date.getFullYear();
    var mm = date.getMonth() + 1;
    var dd = date.getDate();
    nowDate.value = yy + '年' + mm + '月' + dd + '日';
    setInterval(() => {
      nowTime.value = new Date().toLocaleTimeString();
    }, 1000);
  });
</script>
<style>
.cont-time {
        font-weight: 600;
        color: #333;
        font-family: 'eruda-icon';
      }
      .cont-date {
        font-size: 24px;
        font-weight: 600;
        padding-top: 10px;
        color: #555;
        font-family: 'eruda-icon';
      }
</style>