幽灵资源网 Design By www.bzswh.com
1. 实现代码
<template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods:{ dealWithTime(data) { // 获取当前时间 let formatDateTime; let Y = data.getFullYear(); let M = data.getMonth() + 1; let D = data.getDate(); let H = data.getHours(); let Min = data.getMinutes(); let S = data.getSeconds(); let W = data.getDay(); H = H < 10 "0" + H : H; Min = Min < 10 "0" + Min : Min; S = S < 10 "0" + S : S; switch (W) { case 0: W = "日"; break; case 1: W = "一"; break; case 2: W = "二"; break; case 3: W = "三"; break; case 4: W = "四"; break; case 5: W = "五"; break; case 6: W = "六"; break; default: break; } this.nowDate = Y + "年" + M + "月" + D + "日 "; this.nowWeek = "周" + W ; this.nowTime = H + ":" + Min + ":" + S; // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S; }, }, mounted() { // 页面加载完后显示当前时间 this.dealWithTime(new Date()) // 定时刷新时间 this.timer = setInterval(()=> { this.dealWithTime(new Date()) // 修改数据date }, 500) }, destroyed() { if (this.timer) { // 注意在vue实例销毁前,清除我们的定时器 clearInterval(this.timer); } } } </script> <style lang="scss" scope> </style>
2. 实现效果
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...