vue实现-年、月、日、时、分、秒、星期?

一、文章引导

年月日时分秒星期
script
template

二、博主简介

🌏博客首页: 春波petal
📑文章摘要:vue年月日时分秒-星期
💌春波寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。


三、文章内容

废话不多说,直接copy代码使用

在这里插入图片描述

1、template

<div class="time">
	<p>{{ time.hour > 9 ? time.hour : "0" + time.hour }}:{{time.min > 9 ? time.min : "0" + time.min}}:{{ time.seconds > 9 ? time.seconds : "0" + time.seconds }}
	</p>
	<dl>
		<dd>{{ time.days }}</dd>
		<dt>{{ time.year }}-{{time.month > 9 ? time.month : "0" + time.month}}-{{ time.day > 9 ? time.day : "0" + time.day }}
		</dt>
	</dl>
</div>

2、script

<script>
export default {
	data() {
		return {
			time: {
				year: '',
				month: '',
				day: '',
				hour: '',
				min: '',
				seconds: '',
				days: '',
			}
		}
	},
	 methods: {
	    getCurrentDate() {
	      var myDate = new Date();
	      var year = myDate.getFullYear(); //年
	      var month = myDate.getMonth() + 1; //月
	      var day = myDate.getDate(); //日
	      var hour = myDate.getHours(); //时
	      var min = myDate.getMinutes(); //分
	      var seconds = myDate.getSeconds(); //秒
	      var days = myDate.getDay();
	      switch (days) {
	        case 1:
	          days = '星期一';
	          break;
	        case 2:
	          days = '星期二';
	          break;
	        case 3:
	          days = '星期三';
	          break;
	        case 4:
	          days = '星期四';
	          break;
	        case 5:
	          days = '星期五';
	          break;
	        case 6:
	          days = '星期六';
	          break;
	        case 0:
	          days = '星期日';
	          break;
	      }
	      this.time = {
	        year,
	        month,
	        day,
	        hour,
	        min,
	        seconds,
	        days,
	      }
	    }
  	},
  	created(){
    this.getCurrentDate()
    },
    mounted() {
	 setInterval(() => {
     this.getCurrentDate()
      }, 1000)
	}
}
</script>

四、程序语录

程序员爱情观:爱情就像死循环,一旦执行就陷进去了!

本篇博客文章模板唯一版权归属©春波petal

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/307785.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

现代软件测试中的自动化测试工具

自动化测试的重要性和优势 引言&#xff1a;随着软件开发的不断发展&#xff0c;自动化测试工具在现代软件测试中扮演着重要角色。提高效率&#xff1a;自动化测试可以加快测试流程&#xff0c;减少人工测试所需的时间和资源。提升准确性&#xff1a;自动化测试工具可以减少人…

恭喜Zhilong LI同学通过Oracle 19c OCP考试

Oracle 19c OCP两门科目考试成绩、证书展示&#xff1a; Oracle 19c OCP 1z0-082考试详情 Oracle 19c OCP 1z0-083考试详情

PHP 常见设计模式及示例

1.单例模式 单例模式顾名思义&#xff0c;就是只有一个实例。作为对象的创建模式&#xff0c; 单例模式确保某一个类只有一个实例&#xff0c;而且自行实例化并向整个系统提供这个实例。 单例模式的要点有三个&#xff1a; 一是某个类只能有一个实例&#xff1b;二是它必须自…

浏览器不支持 css 中 :not 表达式的解决方法

问题 使用 :not 表达式的样式在不同浏览器中存在不生效的问题。 原因 不生效是因为浏览器版本较低所导致的。&#xff08;更多详细信息请看&#xff1a;MDN&#xff09; 解决方法 初始写法&#xff1a; .input-group:not(.user-name, .user-passwork){width: auto; }改成…

P1067 [NOIP2009 普及组] 多项式输出————C++

目录 [NOIP2009 普及组] 多项式输出题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示 解题思路Code运行结果 [NOIP2009 普及组] 多项式输出 题目描述 一元 n n n 次多项式可用如下的表达式表示&#xff1a; f ( x ) a n x n a …

2024年软考网络工程师如何备考?考什么?

先看一下这知识点总结图&#xff0c;在备考复习前大致简单了解一遍&#xff01; 网工考试时间安排&#xff1a; 网工每年考两次&#xff0c;5月考试一次&#xff0c;11月考试一次 第一步&#xff1a; 通读教程&#xff08;《网络工程师》&#xff09;&#xff0c;首先对教程中…

怎么修改照片尺寸?来分享3款实用的工具!

在当今的自媒体时代&#xff0c;照片是吸引读者眼球的重要元素之一。有时候&#xff0c;我们需要在不同的平台上传照片&#xff0c;但不同的平台对照片的尺寸要求却不尽相同。为了满足这些要求&#xff0c;我们经常需要修改照片的尺寸。那么&#xff0c;如何快速、准确地修改照…

Java:手工触发FullGC及堆占用过高常用分析方法

目录 一、手工触发FullGC方式 1、通过代码 2、通过工具 二、堆占用过高常用分析方法 1、查看堆占用情况 2、手工触发FullGC 3、查看对象占用堆的情况 4、分析可疑对象 使用如下命令查看java进程中内存的使用情况 jstat -gcutil <pid> 5000 发现运行中的java进程堆…

【精简】Vue 一个@click时间绑定多个点击事件

一、方案 多个方法之间使用逗号分隔&#xff08;经测试其实逗号和分号都可以&#xff09; <el-buttonclick"m1(),m2()">m1(){console.log("11");},m2(){console.log("22")},二、效果 三、猜想 经过debugger测试 好像m1和m2执行是按clic…

来了!私域流量转化差4大的原因

很多做私域的朋友常常苦恼的问题&#xff0c;辛辛苦苦把流量从公域引到私域&#xff0c;但是转化特别差&#xff1b;私域里躺着大量的沉默用户&#xff0c;不知道该如何激活&#xff1b;私域业务整体产出特别低&#xff0c;在犹豫要不要放弃等...... 要解决这些问题&#xff0c…

基于ssm智慧社区停车管理系统设计与实现【附源码】

基于ssm智慧社区停车管理系统设计与实现 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&am…

QT项目生成CSV文件保存数据

以下接口包括按时间生成CSV总表和每次测试根据SN和时间区分的子文件夹&#xff08;包括子CSV和子图片存放地址&#xff09; 接口定义 ///CSV文件保存// //测试数据总表//添加数据,用";"分隔开bool TotalCSVDataAdd(QString data);//测试完毕&#xff0c;跳转到下一行…

小redbook.item_get_video API在电商中的市场潜力与前景

小redbook.item_get_video API在电商中的市场潜力与前景 随着互联网的快速发展和普及&#xff0c;电商行业经历了翻天覆地的变化。在这个过程中&#xff0c;数据成为了电商企业竞争的核心资源。小redbook.item_get_video API作为小红书平台提供的一种数据接口服务&#xff0c;…

Shell 正则表达式及综合案例及文本处理工具

目录 一、常规匹配 二、常用特殊字符 三、匹配手机号 四、案例之归档文件 五、案例之定时归档文件 六、Shell文本处理工具 1. cut工具 2. awk工具 一、常规匹配 一串不包含特殊字符的正则表达式匹配它自己 例子&#xff0c;比如说想要查看密码包含root字符串的&#x…

DNS解析原理和k8s DNS 实践

1. 问题背景 1.1 域名解析异常 近期开发的一个功能&#xff0c;需要在k8s集群容器环境中调用公司内部api&#xff0c;api提供了内网域名&#xff0c;解析内网域名异常导致请求超时&#xff0c;因此梳理了下DNS的知识点。 可以先看到下面&#x1f447;这段配置&#xff0c;修…

.NetCore部署微服务(二)

目录 前言 概念 一 Consul注册服务中心 1.1 consul下载 1.2 consul运行 二 服务注册 2.1 安装Consul包 2.2 修改配置文件 2.3 注入Consul服务 2.3 修改Controller&#xff0c;增加HealthCheck方法 三 运行服务 3.1 docker运行服务 前言 上一篇讲到微服务要灵活伸缩…

WPS Office找回丢失的工作文件

WPS office恢复办公文件方法有两种. 1.通过备份中心可以查看近期编辑 office 历史版本进行恢复. 2.缓存备份目录可以查看编辑过的 office 文件的历史版本&#xff0c;新版本 WPS 可以在配置工具-备份清理找到&#xff0c;2019 年旧版本 WPS 可以在新建任意 office 文件-文件-选…

云上攻防--云原生Docker逃逸--特权逃逸--危险挂载--漏洞逃逸

云上攻防–云原生&&Docker逃逸–特权逃逸–危险挂载–漏洞逃逸 目录标题 云上攻防--云原生&&Docker逃逸--特权逃逸--危险挂载--漏洞逃逸Docker介绍判断Docker环境容器逃逸-特权模式容器逃逸-危险挂载挂载DockerSocket逃逸挂载宿主机procfs逃逸 容器逃逸-Docker…

年轻人2023消费图鉴,媒介盒子为你揭秘

回顾近一年的消费&#xff0c;发现大家差不多都是“扣扣嗖嗖的花了很多钱”&#xff0c;如果总结2023年的大众消费关键词&#xff0c;那一定是更加“理性”&#xff0c;据艾瑞咨询《2023年中国消费者洞察白皮书》显示&#xff0c;“精细化”成为2023年的消费关键词&#xff0c;…

数字战场上的坚固屏障:雷池社区版(WAF)

黑客的挑战 智能语义分析算法&#xff1a; 黑客们常利用复杂技术进行攻击&#xff0c;但雷池社区版的智能语义分析算法能深入解析攻击本质&#xff0c;即使是最复杂的攻击手法也难以逃脱。 0day攻击防御&#xff1a; 传统防火墙难以防御未知攻击&#xff0c;但雷池社区版能有效…