💌 作者简介
- 📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【
前端领域创作者
】😜 - 📜 CSDN主页:水香木鱼
- 📑 个人博客:陈春波
- 🎨 系列专栏:后台管理系统
- 🌹 一键四连:关注💋+点赞👍+收藏⭐+留言📝
- 📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。
文章篇幅简短,但很详细。
演示效果:
1、时间渲染
<div>{{ nowDate + ' ' + nowTime + ' ' + nowWeek }}</div>
2、业务逻辑处理
data() {
return {
nowDate: "", // 当前日期
nowTime: "", // 当前时间
nowWeek: "", // 当前星期
dialogTableVisible: false
};
},
mounted() {
this.currentTime();
},
methods: {
currentTime() {
setInterval(this.getDate, 500);
},
getDate() {
var _this = this;
let yy = new Date().getFullYear();
let mm = new Date().getMonth() + 1;
let dd = new Date().getDate();
let week = new Date().getDay();
let hh = new Date().getHours();
let ms =
new Date().getSeconds() < 10
? "0" + new Date().getSeconds()
: new Date().getSeconds();
let mf =
new Date().getMinutes() < 10
? "0" + new Date().getMinutes()
: new Date().getMinutes();
if (week == 1) {
this.nowWeek = "星期一";
} else if (week == 2) {
this.nowWeek = "星期二";
} else if (week == 3) {
this.nowWeek = "星期三";
} else if (week == 4) {
this.nowWeek = "星期四";
} else if (week == 5) {
this.nowWeek = "星期五";
} else if (week == 6) {
this.nowWeek = "星期六";
} else {
this.nowWeek = "星期日";
}
_this.nowTime = hh + ":" + mf + ":" + ms;
_this.nowDate = yy + "/" + mm + "/" + dd;
},
},
// 销毁定时器
beforeDestroy() {
if (this.getDate) {
console.log("销毁定时器");
clearInterval(this.getDate); // 在Vue实例销毁前,清除时间定时器
}
},
📖 博主致谢
感谢大家阅读到结尾,本次的文章就分享到这里,总结了【前端获取当前系统时间/日期(vue写法)】
,希望可以帮到大家,谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发
】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩:
前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
gitee【 码云】使用 Pull Request 功能进行代码审查的操作