先上效果图
<template>
<div>此处显示时间{{ timeTitle }}</div>
<el-button @click="CeShi1">获取系统时间</el-button>
<el-button @click="CeShi2">格式化系统时间</el-button>
<el-button @click="CeShi3">获取系统时间时间戳</el-button>
</template>
<script lang="ts" setup>
// 获取系统时间并格式化
import { ref } from "vue";
const timeTitle = ref();
const CeShi1 = () => {
timeTitle.value = new Date();
};
const CeShi2 = () => {
if (timeTitle.value) {
const YYYY = timeTitle.value.getFullYear();
const MM =
timeTitle.value.getMonth() + 1 >= 10
? timeTitle.value.getMonth() + 1
: "0" + (timeTitle.value.getMonth() + 1);
const DD = timeTitle.value.getDate();
const hh =
timeTitle.value.getHours() >= 10
? timeTitle.value.getMinutes()
: "0" + timeTitle.value.getMinutes();
const mm =
timeTitle.value.getMinutes() >= 10
? timeTitle.value.getMinutes()
: "0" + timeTitle.value.getMinutes();
const ss =
timeTitle.value.getSeconds() >= 10
? timeTitle.value.getSeconds()
: "0" + timeTitle.value.getSeconds();
timeTitle.value =
YYYY + "年" + MM + "月" + DD + "日" + hh + "时" + mm + "分" + ss + "秒";
}
};
const CeShi3 = () => {
timeTitle.value = Date.parse(timeTitle.value);
};
</script>